سلام عزیزان ، به پارت هشتم از سری مقالات "مقدمات React" خیلی خوش اومدین . امیدوارم پارت های قبلی رو به خوبی کاور کرده باشین و بعد اومده باشین سراغ این مقاله ! از این قسمت به بعد قرار هست که با هم از صفر یک مینی پروژه رو تو چند پارت بصورت پیوسته توسعه بدیم تا هم پایه مون رو قوی تر کنیم و هم اینکه در خلال توسعه اش موارد جدیدتری رو یاد بگیریم !
برای شروع با استفاده از پکیج create-react-app یک پروژه جدید بنام person manager ایجاد میکنیم و بعد تمام فایل های داخل پوشه ی public و src رو مثل قبل پاک میکنیم و فقط فایل index.html رو نگه میداریم :
سپس در پوشه ی srcیک فایل جدید بنام App.js ایجاد میکنیم و بعد برای اینکه اولین کامپوننت مون رو بصورت class component بنویسیم ، در داخل فایل App.js به اینصورت عمل میکنیم :
حالا نوبت رندر کردن کامپوننت مون هست ، برای این منظور در داخل پوشه ی src یک فایل جدید به نام index.js ایجاد میکنیم و قطعه کد زیر رو در داخلش قرار میدیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خروجی زیر رو مشاهده خواهیم کرد :
در مرحله ی بعد میایم برای کامپوننت مون یک state تعریف میکنیم که حاوی آرایه ی persons هست و اطلاعات یکسری از افراد مختلف رو در داخل خودش نگهداری میکنه :
حالا برای اینکه محتوای پوشه ی src زیاد شلوغ نشه و پروژه مون ساختار بندی بهتری داشته باشه ، میایم در داخل پوشه ی src یک پوشه ی جدید بنام Components ایجاد میکنیم و از این به بعد تمام کامپوننت های جدید رو در داخل این پوشه قرار میدیم . سپس در داخل پوشه ی Components یک پوشه ی جدید به نام Person و در داخل پوشه ی Person هم یک فایل جدید بنام Person.jsx ایجاد میکنیم و قطعه کد زیر رو در داخلش قرار میدیم :
در اینجا اطلاعات state ای که در کامپوننت App تعریف کردیم رو اومدیم بصورت props دریافت کردیم (توجه کنیم بجای اینکه بیایم بطور مستقیم از آبجکت props استفاده کنیم ، اومدیم از تکنیک Object Destructuring استفاده کردیم ) ! تا الان ما میومدیم لیست افراد رو در داخل کامپوننت App رندر میکردیم ، اما اینکار باعث شلوع شدن کامپوننت App میشه و راهکار بهتر این هست که بیایم در داخل پوشه ی Person و کنار فایل Person.jsx ، یک فایل جدید به نام Persons.jsx ایجاد میکنیم و عمل رندر کردن افراد رو به اینصورت در داخلش قرار بدیم :
حالا میایم این کامپوننت رو در داخل کامپوننت App رندر میکنیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خروجی زیر رو مشاهده خواهیم کرد :
همونطور که مشخصه برنامه مون اصلا ظاهر خوبی نداره و باید بهش استایل بدیم . به همین دلیل در قسمت بعدی با نحوه ی استایل دهی در React آشنا خواهیم شد ! خوب بیاین اونجا که منتظرتونم :)
