سلام عزیزان ، به پارت پنجم از سری مقالات "مقدمات React" خیلی خوش اومدین . امیدوارم حالتون عالی باشه و تا به اینجای کار از مقاله های قبلی نهایت بهره رو برده باشید . همونطور که در مقاله ی قبلی هم خدمتون گفتم ، در این بخش قرار هست تاحدی با نحوه ی توسعه کامپوننت ها ، ساختار Class Component ها و Functional Component ها آشنا بشیم و از صفر مطلق کامپوننت هامون رو توسعه بدیم تا کم کم خودمونو برای پیاده سازی یه مینی پروژه مفهومی که بتونه تمام مقدمات React رو به خوبی کاور کنه ، آماده کنیم ! اما قبل از اینکه در این بخش با من همراه باشید ، بهتون پیشنهاد میکنم برای درک بهتر مفهوم کامپوننت ها اگر مقاله ی زیر رو نخوندین ، چند دقیقه وقت بزارید و حتما مطاله اش کنید :
مفهوم کامپوننت ها در دنیای واقعی و در React
خوب همونطور که گفته شد در این قسمت میخوایم با موارد پایه ای React آشنا بشیم ، یعنی میخوایم توسعه ی برنامه مون رو از صفر مطلق شروع کنیم و در خلالش با موارد جدیدتری اشنا بشیم ! قبل از شروع ، تمام فایل های غیر ضروری فولدرهای public و src رو حذف میکنیم و ساختار پروژه مون رو به اینصورت تغییر میدیم ( یعنی فقط فایل index.html رو میزاریم بمونه ) :
البته فایل index.css رو هم نگه داشتیم که استایل های کلی برنامه رو در داخل خودش نگهداری میکنه ( من بخاطر نمایش بهتر ظاهر فونت برنامه این فایل رو نگه داشتم وعلا کاملا اختیاری هست و میتونین این فایل رو هم حذف کنین :) البته توجه کنین که در رابطه با استایل دهی در React هم بطور مفصل مقاله خواهیم داشت ) . خوب بیاین ادامه بدیم ...
ما تو فولدر src به یک کامپوننت والد نیاز داریم ! همونطور که قبلا هم گفته شد react یک کامپوننت والد داره که شامل تمام کامپوننت های قطعه قطعه شده هست . ما این کامپوننت اصلی رو App.js مینامیم ، البته هر اسم دیگه ای میتونه داشته باشه ولی استاندارد به این صورت هست . پس در فولدر src یک فایل جدید بنام App.js ایجاد میکنیم و بعد برای اینکه اولین کامپوننت مون رو بصورت class component تعریف کنیم ، در داخل فایل App.js به اینصورت عمل میکنیم :
چند نکته در مورد ساختار class component ها :
اگر کامل متوجه نشدین نگران نباشید ، جلوتر که بریم بهتر درکش میکنین !
حالا برای اینکه بتونیم به کامپوننت مون استایل بدیم (در این حد که مثلا بتونیم وسط چینش کنیم) ، در داخل فولدر src و در کنار App.js ، یک فایل جدید به نام App.css ایجاد میکنیم و استایل زیر رو در داخلش قرار میدیم :
و بعد برای اینکه بتونیم در داخل کامپوننت مون از این استایل استفاده کنیم ، باید در وهله ی فایل App.css رو در داخل فایل App.js ایمپورت کنیم و بعد کلاس App. رو به root (عنصر ریشه ای) کامپوننت مون اضافه کنیم:
و بعد کامپوننت مون رو export میکنیم چون تو دنیای جاوااسکریپت هر فایل js مجزاست ، به عبارت دیگه هر فایل جاوااسکریپت یک ماژول محسوب میشه که به محتوای بیرون از خودش دسترسی نداره ، حالا برای اینکه بتونیم این مشکل رو رفع کنیم ، مثلاً دو فایل مجزا App.js و index.js رو به هم ربط بدیم ( به این صورت که در فایل index.js بتونیم از کامپوننت App استفاده کنیم ) ، باید اول کامپوننت App رو به اینصورت export کنیم :
حالا نوبت رندر کردن کامپوننت مون هست ، برای این منظور در داخل فولدر src یک فایل جدید به نام index.js ایجاد میکنیم و قطعه کد زیر رو در داخلش قرار میدیم :
حالا اگر تغییرات رو ذخیره کنیم و با npm start برنامه مون رو اجرا کنیم ، در مرورگر همچین چیزی رو خواهیم دید :
نکته : ما با استفاده از قابلیت Object Destructuring میتونیم ساده تر هم عمل کنیم ( اگر نمیدونین نحوه ی عملکردش به چه صورته پیشنهاد میکنم حتما در رابطه باهاش سرچ کنید و پایه ی جاوااسکریپتتون رو آپدیت کنید ) :
خوب ما تا اینجای کار با مفاهیم اولیه و پایه ای react مثل JSX به خوبی آشنا شدیم و حالا وقتشه که یک کامپوننت واقعی برای خودمون تعریف کنیم ! برنامه ی ما ممکنه از کامپوننت های متعددی تشکیل بشه ولی کامپوننت اصلی ما همون کامپوننت APP هست ، یعنی ما کامپوننت های دیگه رو در داخل پروژه مون توسعه میدیم و سپس اون هارو در داخل کامپوننت APP فراخونی میکنیم ! معمولاً کاری که توسعه دهنده های React انجام میدن به اینصورته که در داخل پوشه ی src ، یک پوشه جدید بنام Components ایجاد میکنن و همه ی کامپوننت ها رو در داخل اون قرار میدن تا راحت تر بتونن کامپوننت هاشون رو توسعه بدن !
توجه : یک قراردادی بین برنامه نویس های react وجود داره که همیشه حرف اول اسم کامپوننت ها رو بصورت حرف بزرگ مینویسن ، اما ما مجبور به پیروی از این موضوع نیستیم . با این حال از اونجایی که این موضوع یک قرارداد فراگیر هست ، ماهم ازش پیروی میکنیم و ساختار کامپوننت های خودمون رو بر همین اساس ایجاد میکنیم !
حالا فرض کنیم میخوایم کامپوننتی بنام Person داشته باشیم که اطلاعاتی راجع به یک فرد رو در داخل خودش نگهداری میکنه . در قدم اول همونطور که گفته شد ، برای اینکه محتوای فولدر src زیاد شلوغ نشه و پروژه مون ساختار بندی بهتری داشته باشه ، میایم در داخل فولدر src یک فولدر جدید به نام Components ایجاد میکنیم و از این به بعد کامپوننت های جدید رو در داخل این فولدر قرار میدیم . سپس در داخل فولدر Components یک فولدر جدید به نام Person و در داخل فولدر Person هم یک فایل جدید بنام Person.jsx ایجاد میکنیم و قطعه کد زیر رو در داخلش قرار میدیم ( برای اینکه بین کامپوننت ها و فایل های عادی js تمایز قائل بشیم و همچنین هنگام پیاده سازی کامپوننت ها intellisence بهتری داشته باشیم ، میتونیم برای کامپوننت ها از پسوند .jsx استفاده کنیم ، البته این موضوع اجباری نیست ولی در کل پیشنهاد میشه که ازش پیروی کنیم ) :
از این به بعد میتونیم از این کامپوننت ساده در فایل های دیگه ی پروژه مون استفاده کنیم ! مثلا اگر بخوایم از کامپوننت Person در داخل کامپوننت App استفاده کنیم ، باید در وهله ی اول اون رو در داخل کامپوننت App ایمپورت کنیم و بعد ازش استفاده کنیم :
سوال : چرا کدهایی که در داخل کامپوننت Person نوشتیم رو مستقیما به JSX موجود در داخل فایل App.js اضافه نکردیم و از روش طولانی ایجاد کامپوننت جدید و . . . استفاده کردیم ?
پاسخ : دلایل مختلفی برای انجام این کار وجو داره ! یک اینکه با استفاده از این روش میتونیم کامپوننت هامون رو جداگونه و به صورت ماژولار در فایل های جدا قرار بدیم تا مدیریت و نگهداریشون آسون تر باشه (چون در غیر اینصورت باید تمام کدها رو در داخل App.js قرار بدیم که اینطوری خیلی شلوغ میشه) و دو اینکه کامپوننت های جداگونه ( به شکلی که ما ساختیم ) قابلیت استفاده ی مجدد دارن !
همونطور که میدونیم یکی از ویژگی های مهم کامپوننت هایی که بصورت جداگونه تعریف میشن و باعث میشه که کامپوننت ها کاربردی تر به نظر برسن ، بحث reusable بودنشون هست ! یعنی ما بسته به نیازمون میتونیم بارها و بارها از یک کامپوننت استفاده کنیم ! به عنوان مثال همونطور که در قطعه کد زیر مشخصه ، ما اومدیم کامپوننت </ Person> رو 3 بار فراخونی کردیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خروجی زیر رو مشاهده خواهیم کرد :
اگر بخوایم ساختار کامپوننت های App و Person که بصورت کلاس محور هستن رو بصورت کامپوننت تابعی بنویسیم ، باید به اینصورت عمل کنیم :
همونطور که مشخصه تفاوت های ظاهری کامپوننت تابعی با کامپوننت کلاس محور به اینصورته :
خوب اینا صرفا تفاوت های ظاهری بودن و نسبت به هم تفاوت های دیگه ای هم دارن ، اما فعلا زمانش نرسیده که بهشون بپردازیم ، و فعلا در همین حد بدونین کفایت میکنه !
خوب دوستان این قسمت هم به پایان رسید ، امیدوارم لذت کافی رو برده باشین و نهایت بهره رو از این مقاله ببرین . در رابطه با این مقاله هم اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین . همچنین اگر که این مطلب براتون مفید بوده ، میتونین با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :)
راستی بخش بعدی رو به هیچ عنوان از دست ندید ، چراکه قرار هست با نحوه ی نمایش خروجی پویا و مفهوم props در React آشنا بشیم ! پس اونجا میبینمتون ...
