05. توسعه ی یک کامپوننت ساده در React

سلام عزیزان ، به پارت پنجم از سری مقالات "مقدمات 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 ها :· ساختار class component ها به اینصورته که هر کامپوننتی باید کلاس React.Component رو extend کنه .هر کلاسی در داخل سازندش ، میتونه با استفاده از متد super ، سازنده والدش رو فراخونی کنه .هر کلاسی یک متد به نام render داره و ما در داخل متد render هست که چیزی رو return میکنیم .اگر کامل متوجه نشدین نگران نباشید ، جلوتر که بریم بهتر درکش میکنین !حالا برای اینکه بتونیم به کامپوننت مون استایل بدیم (در این حد که مثلا بتونیم وسط چینش کنیم) ، در داخل فولدر 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 که بصورت کلاس محور هستن رو بصورت کامپوننت تابعی بنویسیم ، باید به اینصورت عمل کنیم :کامپوننت App :کامپوننت Person :همونطور که مشخصه تفاوت های ظاهری کامپوننت تابعی با کامپوننت کلاس محور به اینصورته :برای Functional Component ها دیگه نیازی به ایمپورت کردن و استفاده از React.Component نیست.برای تعریف Functional Component ها ، دیگه متدی مثل ()render نداریم.خوب اینا صرفا تفاوت های ظاهری بودن و نسبت به هم تفاوت های دیگه ای هم دارن ، اما فعلا زمانش نرسیده که بهشون بپردازیم ، و فعلا در همین حد بدونین کفایت میکنه !خوب دوستان این قسمت هم به پایان رسید ، امیدوارم لذت کافی رو برده باشین و نهایت بهره رو از این مقاله ببرین . در رابطه با این مقاله هم اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین . همچنین اگر که این مطلب براتون مفید بوده ، میتونین با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :) راستی بخش بعدی رو به هیچ عنوان از دست ندید ، چراکه قرار هست با نحوه ی نمایش خروجی پویا و مفهوم props در React آشنا بشیم ! پس اونجا میبینمتون ...