سلام. توی این مقاله میخوام مفهوم کامپوننت و یک سری چیز ها رو راجع بهش به شما بگم. اگر قسمت قبل این مقاله رو نخوندید، پیشنهاد میدم بخونید.
کامپوننت ها، قسمت های قابل استفاده مجدد و تیکه هایی از یو آی اصلی وبسایت ما هستند. شما میتونید هر قسمت از سایتتون رو به کامپوننت های جداگونه تقسیم کنیم. این به شما کمک میکنه که برای طراحی هر کامپوننت، فقط به منطق و طراحی اون کامپوننت فکر کنید و پیچیدگی کار شما کمتر میشه. شما میتونید از کامپوننت ها، توی بدنه کامپوننت های دیگه استفاده کنید. مثل نوشتن تگ های تودر توی اچ تی ام ال. توی ریکت، دو نوع کامپوننت میشه ساخت. فانکشن کامپوننت و کلاس کامپوننت. سراغ ساخت هر کدوم از اینا هم میریم. اتریبیوت هایی که به یه کامپوننت اضافه میکنید در نهایت به یه آبجکت تبدیل میشن. به این آبجکت میگن props که مخفف properties هست که باعث میشن کامپوننت های ما قابل استفاده مجدد باشن و دیگه نیازی نیست که بیاید و متن های کامپوننت رو هارد کد(استاتیک نوشتن کد ها) کنید. به راحتی میتونید موقع استفاده از کامپوننت مورد نظرتون، مقادیری رو به عنوان پراپس به کامپوننتون بدید و توی کامپوننتتون از اون مقادیر استفاده کنید. تعریف پراپ برای یه کامپوننت دقیقا مثل تعریف اتریبیوت برای یه تگ جی اس ایکسی هست. به پراپ هاتون هر اسمی میتونید بدید(البته نه هر اسمی. با توجه به قوانین جاوا اسکریپت میتونید هر اسمی بدید). یک مثال از کاربردی بودن کامپوننت ها واستون میزنم:
شما میخواید قسمت نظرات برای صفحه محصولتون تهیه کنید. هر نظر با نظر دیگه متفاوت هست. اینجا شما باید بیاید و قسمت نظرات رو خودتون توی صفحه نظرات بسازید؟ نه. چون شما از اون نظرات میخواید جاهای دیگه سایتتون هم استفاده کنید. مثلا قسمت نظرات راجع به سایتتون. اگر اینکارو کنید شما باید کد های قسمت نظرات صفحه محصولتون رو کپی پیست کنید توی قسمت اصلی سایتتون. خب این عاقلانه نیست. پس شما باید خود باکس نظر که نظر کاربر توش نوشته شده، یه کامپوننت بسازید. حالا که اون کامپوننت رو ساختید، واسه اینکه اون کامپوننت رو قابل استفاده مجدد کنید(n بار توی بخش نظرات محصول با تکستای مختلف نمایشش بدید و n بار هم توی بخش اصلی سایتتون که نظرات کاربر ها راجع به سایتتون هست با تکستای مختلف نمایشش بدید) باید چیکار کنید؟ باید از پراپس استفاده کنید.
پس تا الان به مفهوم کامپوننت پی بردید. بریم سراغ ساخت فانکشن کامپوننت و کلاس کامپوننت.
فانکشن کامپوننت ها، همون توابع جاوا اسکریپتی هستن و چیز عجیب غریبی نیست ساختنشون. همه فانکشن کامپوننت ها، کد های جی اس ایکس بر میگردونن. کد های جی اس ایکس مربوط به خودشون.
بریم کامپوننت کامنت رو بسازیم. خب کامپوننت کامنت چه چیزی رو نمایش میده؟ تکست کامنت، تاریخ کامنت و اسم کسی که کامنت گزاشته.
برای ساخت کامپوننت کامنت، اینکار رو توی فایل index.js انجام بدید:
به همین راحتی یه کامپوننت ساختم. اگر میخواید از پراپس استفاده کنید، یادتون باشه حتما پراپس رو به عنوان آرگومان به فانکشنتون اضافه کنید. و اینکه حتما هم نیازی نیست کامپوننت رو به شکل اررو فانکشن تعریف کنید. میتونید به شکل فانکشن معمولی تعریف کنید. حالا چجوری میشه از کامپوننت استفاده کرد و پراپ ها رو بهش ارسال کرد؟ اینجوری:
الان ما به صفحه محصولاتمون سه تا کامنت با سه تا پراپ متفاوت اضافه کردیم. دقت کنید پراپ های یه کامپوننت، باید بر اساس اسم پراپی که ما توی یه کامپوننت نیاز داریم نامگزاری بشن. مثلا ما توی کامپوننت کامنت، به پراپ name نیاز داریم. پس باید موقع رندر کردن یو آی توی بدنه تگ باز یا خود تگ( کامپوننتایی که تگ فرزندی احتیاج ندارن رو میشه درجا بستشون. مثل </Comment>) پراپ های مورد نیاز کامپوننت با مقادیر مورد نیازشون رو تعریف کنید. به همین راحتی میشه فانکشن کامپوننت ساخت!
گفتم که ما دو نوع کامپوننت داریم. فانکشن کامپوننت و کلاس کامپوننت. فکر میکنم ریکت دولوپر ها تا قبل از اومدن ورژن 16.8.0 از کلاس کامپوننت ها استفاده میکردند چون فانکشن کامپوننت ها قابلیت های مهم که کلاس کامپوننت ها داشتن رو نداشتن. بعد از اومدن ورژن 16.8.0 ریکت، اون قابلیت ها توی فانکشن کامپوننت ها هم موجود شدن(اسم اون قابلیت رو نمیگم که ذهنتون درگیر نشه :)) و از اون موقع دیگه خیلی از ریکت دولوپر ها از فانکشن کامپوننت ها استفاده میکنن مگر در شرایط خاص که نیاز به کلاس کامپوننت دارند. به همین دلیل دونستن ساخت کلاس کامپوننت هم خیلی مهم هست. خب بریم سراغ ساخت کلاس کامپوننت ها.
همونجور که از اسم این نوع کامپوننت معلوم هست، این کامپوننت ها در واقع کلاس هایی هستند که از یه کلاس خاص ارث بری میکنن. اسم اون کلاس خاص، Component هست. قبل از ساخت کلاس کامپوننت ها یادتون باشه که کلاس Component یا React رو از ماژول react ایمپورت کرده باشین چون میخوایم از کلاس Component ارث بری کنیم. کلاس کامپوننت عضوی از کلاس React هست که شما میتونید جداگونه هم ایمپورتش کنید. کلاس کامپوننت ها رو اینجوری میسازن:
میتونید از React.Component هم ارث بری کنید.
خب ما در اینجا فانکشن کامپوننت کامنت رو به شکل کلاس ساختیم. توی کلاس کامپوننت ها برای اینکه کد جی اس ایکس رو برگردونید باید از متد render استفاده کنید و توی اون متد، تگ های جی اس ایکستون رو ریترن کنید. برای استفاده از پراپس باید از کلید واژه this و بعدش props و بعدش اسم پراپتون به اون پراپ دسترسی پیدا کنید و ازش استفاده کنید. به همین راحتی یه کلاس کامپوننت ساختید.
به گفته داکیومنت ریکت، شما باید برای ساخت کامپوننت ها، چه از نوع فانکشن چه از نوع کلاس، اسم اون ها رو با حرف بزرگ شروع کنید. در غیر این صورت ریکت با اون کامپوننت مثل تگ اچ تی ام ال رفتار خواهد کرد. میتونید تست هم بکنید. اسم کلاس کامپوننت کامنت رو از Comment به comment تغییر بدید. ریکت اون رو رندر نمیکنه توی دام و توی کنسول مرورگرتون بهتون ارور میده.
اول مقاله توی بخش کامپوننت چیست، بهتون گفتم که کامپوننت ها رو میشه توی کامپوننت های دیگه هم استفاده کرد. کار عجیب غریبی هم نیست. تگ جی اس ایکس رو چجوری به صورت تو در تو تعریف میکردیم؟ تعریف کامپوننت های تو در تو هم همینجوری هست. واستون یه مثال میزنم جلو تر.
یه چیز کاربردی که هست اینه که توی برنامه های ریکت، معمولا یه کامپوننت اصلی وجود داره به اسم App. اسمشو هر چی دوست داشتید میتونید بزارید. این کامپوننت کل کامپوننت های شما رو در بر میگیره. از نویگیشن بار بگیر تا فوتر. و اینجوری شما توی کل برنامه تون فقط یک بار از ReactDOM.render استفاده میکنید که این خیلی عالی هست. چجوری اینکار رو انجام بدیم؟ اینطوری:
الان ما از تمام کامپوننت های اصلیمون از جمله Footer و Header و Product توی کامپوننت اصلی برنامه مون که App هست استفاده کردیم. از کامپوننت Comment هم توی کامپوننت Product استفاده کردیم. پس دیدید که اصلا تعریف تو در توی کامپوننت ها سخت نیست.
توی ریکت، شما نمیتونید پراپس کامپوننتتون حالا چه از نوع کلاس چه از نوع فانکشن، رو تغییر بدید. اگر این کار رو انجام بدید ارور دریافت خواهی کرد. توی ریکت، همه فانکشن ها pure یا خالص باید باشند. فانکشن های خالص به فانکشن هایی میگن که آرگومان های خودشونو تغییر نمیدن. فانکشن هایی که impure یا ناخالص هستن، آرگومان های خودشون رو دستکاری میکنن.
چند تا عکس پروفایل پیدا کنید و توی فولدر public پروژه ریکتیتون ذخیره کنید. سپس یه کامپوننت به اسم Avatar بسازید توی فایل index.js که یه پراپ از نوع استرینگ دریافت کنه و اون پراپ، آدرس یکی از عکس های پروفایلی باشه که توی فولدر public ذخیره کردید. کامپوننت Avatar باید یه تگ img با سورسی که پراپتون هست، برگردونه. آدرس عکس ها رو جوری بدید که انگار از فایل index.html دارید عکستون رو لود میکنید. از این کامپوننت توی کامپوننت Comment استفاده کنید. و اینکه یادتون باشه اول پراپ رو به کامپوننت Comment ارسال کنید و بعد توی کامپوننت Comment، اون پراپ رو ارسال کنید به کامپوننت Avatar.
با توجه به مفاهیمی که توی این مقاله و مقالات قبل گفتم، به احتمال زیاد میتونید این تمرین رو با موفقیت انجام بدید. توی مقاله بعدی جواب این تمرین رو میگم بهتون.
خب به آخر مقاله رسیدیم. امیدوارم از این مقاله خوشتون اومده باشه و کلی چیز یاد گرفته باشید. منتظر قسمت بعدی باشید.
اگه دوست داشتید لایک کنید مقاله مو. اگه دوست داشتید دنبال کنید من رو. اگه دوست داشتید یه کامنت مثبت و یا انتقاد منطقی بزارید واسم. خلاصه هرکاری دوست داشتید توی زندگیتون انجام بدید؛ هرکاری که به کسی آسیب نزنه و یا غمگینش نکنه :)
