سلاام رفقا ، حالتون چطوره ؟ ردیفین :) ؟ به پارت سیزدهم از سری مقالات " آموزش مقدماتی React" خیلی خوش اومدین . همونطور که در قسمت قبل هم بهتون قول داده بودم ، در این قسمت قرار هست که رنگ و لعاب مینی پروژه مون رو کلا تغییر بدیم و در خلال تغییر استایل هاش با موارد جدیدی آشنا بشیم .
رفقا همونطور که میدونین در بخش های قبلی با موارد پایه ای React آشنا شدیم و تونستیم همچین مینی پروژه ای رو پیاده سازی کردیم :
اما همونطور که میبینیم ظاهر برنامه مون اصلا کاربر پسند نیست و به همین دلیل در این بخش قصد داریم تمام تمرکزمون رو بزاریم روی بهتر کردن استایل برنامه مون ، به اینصورت که قرار هست از پکیج هایی نظیر Bootstrap 5 ، font-awesome و react-toastify استفاده کنیم و ظاهر برنامه مون رو به اینصورت تغییر بدیم :
برای شروع پکیج Bootstrap 5 رو بصورت زیر از طریق npm نصب میکنیم :
و در قدم بعدی پکیج font-awesome رو هم به اینصورت از طریق npm نصب میکنیم :
توجه کنیم که npm بصورت خودکار آخرین نسخه ی Bootstrap یعنی نسخه ی Bootstrap 5 و آخرین نسخه ی رایگان font-awesome رو برامون نصب میکنه !
حالا سوالی که پیش میاد این هست که بهترین روش استفاده از این دو پکیجی که نصب کردیم به چه صورته ؟ احتمالاً جواب خیلی هاتون به اینصورته که میگین فایل هایی که از این دو پکیج نیاز داریم رو در داخل فایلindex.js ایمپورت میکنیم ، خوب آره درسته اما از نظر منطقی اصلا روش بهینه و درستی نیست !
- عه چرا ؟ :|
+ یکم که بریم جلوتر خودتون متوجه میشید :) به هر حال ما فعلاً فایل های مورد نیازمون رو به اینصورت در داخل فایلindex.js ایمپورت میکنیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، میبینیم که بله Boootstrap مون یکسری تغییرات جزئی رو به ظاهر برنامه مون اعمال کرده :
اگر از برنامه مون یک inspect بگیریم و به محتوای تگ head دقت کنیم ، میبینیم که بله واویلاست :) چون React اومده تمام استایل هایی که در خلال کامپوننت ها و برنامه مون استفاده کردیم رو به عنوان استایل های internal در داخل تگ های <style> قرار داده و اونارو به تگ <head> اضافه کرده که جالب نیست ، چون بشدت رو پرفورمنس برنامه مون تاثیر منفی میزاره !
برای رفع این مشکل باید فایل هایی که در داخل فایلindex.js ایمپورت کرده بودیم رو کامنت کنیم ( یا حذف کنیم ) و اونارو به خود index.html اضافه کنیم ، اما دیگه نمیایم مثل حالت قبل عمل کنیم ! یعنی دیگه نمیایم از پوشهnode_modules شروع به آدرس دهی کنیم ، بلکه میایم فایل های مورد نیازمون رو در جای مناسب تر ذخیره میکنیم و هر چیزی که غیرضروری هست رو حذف میکنیم ، یا به عبارت دیگه بعد از اینکه فایل های مورد نیازمون رو در قسمت public برنامه مون ذخیره میکنیم ، میایم پکیج هایی که از طریقnpm نصب کرده بودیم روuninstall میکنیم ! حالا اگر گفتین چرا ؟ :) آفرین ، یک اینکه حجم node_modulesبرنامه مون کمتر میشه و دو اینکه طرز آدرس دهی فایل هامونclean تر میشه و دیگه نیازی نیست که دو متر آدرس دهی کنیم ! البته روش های دیگه ای هم هستن که میتونیم با کانفیگ کردنشون خیلی حرفه ای تر عمل کنیم ولی در حال حاضر خارج از بحث ماست! خوب همونطور که گفته شد در وهله ی اول میایم فایل هایی که در داخل فایل index.js ایمپورت کرده بودیم رو کامنت میکنیم ( یا حذف میکنیم ) :
و بعد فایل های موردنیازمون رو از دل پکیج هایی که نصب کردیم میکشیم بیرون و اونهارو در جای مناسب تری ذخیره میکنیم ! به اینصورت که در ابتدا فایل های ضروری css پکیج bootstrap رو انتخاب میکنیم و اون ها رو به پوشه ی css در پوشه public انتقال میدیم :
سپس فایل های ضروری js پکیج bootstrap رو انتخاب میکنیم و اون ها رو به پوشه ی js در پوشه public انتقال میدیم . ( البته توجه کنیم که فایل bootstrap.bundle.min.js به تنهایی شامل هر دو فایل bootstrap.min.js و popper.min.js هست ، یعنی ما برای بخش جاوااسکریپت bootstrap یا میتونیم به تنهایی فقط فایل bootstrap.bundle.min.js رو ضمیمه سند index.html مون کنیم ، یا اینکه میتونیم اول فایل popper.min.js و بعد فایل bootstrap.min.js رو ضمیمه کنیم ) :
سپس فایل ضروری css پکیج font-awesome رو انتخاب میکنیم و اون رو به پوشه ی css در پوشه public انتقال میدیم :
و بعد تمام فونت های پکیج font-awesome رو انتخاب میکنیم و اون هارو به پوشه ی fonts در پوشه public انتقال میدیم :
سپس پکیج های bootstrap و font-awesome رو بصورت زیر unistall میکنیم ، چون همونطور که در بالاتر هم گفته شد بعد از ذخیره کردن فایل های موردنیازمون ، دیگه به خود پکیج ها نیازی نداریم :
سپس بعد از انجام اینکارها فایل های مورد نیازمون رو به اینصورت ضمیمه سند index.html میکنیم :
همونطور که مشخصه علاوه بر ضمیمه کردن فایل های موردنیازمون ، به تگ html هم اتریبیوت dir="rtl" رو اضافه کردیم تا قالبمون راست چین بشه . خوب حالا که همه چیز آمادست ، میتونیم استایل دهی برنامه مون رو شروع کنیم ! برای این منظور ، در ابتدا تمام استایل هایی که تا به الان در داخل کامپوننت App و Person تعریف کردیم رو حذف میکنیم و به اینصورت با استفاده از bootstrap ، کامپوننت App و Person رو استایل دهی میکنیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، میبینیم که ظاهر برنامه مون به اینصورت تغییر کرده :
در ادامه میخوایم با استایل دهی داینامیک یا اصطلاحاً Dynamic Styling آشنا بشیم. استایل دهی داینامیک یعنی بیایم لاجیکی رو پیاده سازی کنیم که به ازای برقرار بودن شرط خاصی در برنامه ، استایل فلان المنت برنامه مون بطور خودکار عوض بشه ! میدونم احتمالا مغز بعضی هاتون رگ به رگ شد :) اما بزارین بهتر توضیح بدم ...
به عنوان مثال فرض کنیم میخوایم طوری استایل دهی کنیم که وقتی تعداد Person ها برابر 0 یا 1 بود ، رنگ badge بصورت danger ، زمانی که تعداد Person ها برابر 2 بود ، رنگ badge بصورت warning و زمانی که تعداد Person ها برابر 3 یا بیشتر بود ، رنگ badge بصورت success نمایش داده بشه یا به عنوان یک مثال دیگه ، فرض کنیم میخوایم طوری استایل دهی کنیم تا اگر کاربر روی دکمه "مخفی کردن اشخاص" کلیک کرد تا Person ها Hide بشن ، رنگ دکمه بصورت danger نمایش داده بشه و اگر مجدداً روی دکمه "نمایش اشخاص" کلیک کرد تا Person ها نمایش داده بشن ، رنگ دکمه بصورت info نمایش داده بشه ! خوب حالا اگر بخوایم همین ایده هارو در برنامه مون پیاده سازی کنیم ، باید در ابتدا برای استایل دهی داینامیک دکمه "نمایش اشخاص" ، به اینصورت عمل میکنیم :
و بعد برای استایل دهی داینامیک badge مون هم به اینصورت عمل کنیم :
سپس مقدار متغیر badgeStyle رو به اینصورت به لیست کلاس های span مون اضافه میکنیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، به ازای هر بار ایجاد و حذف Person ها و همچنین به ازای هر بار کلیک بر روی دکمه ی "نمایش اشخاص" ، متوجه تغییر استایل badge و دکمه ی موردنظرمون خواهیم شد !
در ادامه میخوایم پکیج react-toastify رو هم به پروژه مون اضافه کنیم تا از طریق اون بتونیم هنگام ایجاد یا حذف هر Person ، پیغام مناسبی رو به کاربر نمایش بدیم ! برای آشنایی با نحوه ی استفاده از این پکیج ، میتونیم لینک زیر رو مطالعه کنیم :
https://www.npmjs.com/package/react-toastify
برای نصب پکیج react-toastify از طریق npm ، باید دستور زیر رو تو محیط ترمینال اجرا کنیم :
سپس بعد از اینکه مراحل نصبش تموم شد ، طبق داکیومنتش باید 3 مرحله ی زیر رو به ترتیب انجام بدیم تا بتونیم از این پکیج استفاده کنیم :
خوب تا اینجا تمام موارد ضروری رو انجام دادیم و حالا آماده ایم که از react-toastify استفاده کنیم . به عنوان مثال اگر بخوایم به ازای ایجاد هر Person جدید یک Toast با پیغام مناسب رو نمایش بدیم ، باید در داخل متد handleNewPerson به اینصورت عمل کنیم :
حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که به ازای ایجاد هر Person جدید ، یک Toast بصورت زیر بهمون نمایش داده میشه :
اگر کمی دقت کنیم متوجه میشیم که ظاهر Toastمون دو تا مشکل داره :) یک اینکه راست چین نیست و دو اینکه فونتش اصلا جالب نیست ! برای رفع این مشکل باید فایل ReactToastify.css رو باز کنیم و مقدار پراپرتی های direction و font-family سلکتور Toastify__toast. رو بصورت زیر دستکاری کنیم :
حالا اگر مجددا خروجی برنامه مون رو چک کنیم ، خواهیم دید که مشکل ظاهری Toast مون هم حل شده ( اگر همچنان مثل حالت قبل بود ، باید برنامه مون رو مجددا با npm start اجرا کنیم ) :
حالا اگر بخوایم برای عمل Delete هم یک Toast تعریف کنیم تا به ازای حذف هر Person ، یک Toastمتفاوت نمایش داده بشه و بهمون بگه که فلان کاربر حذف شد ، باید در داخل متد handleDeletePerson به اینصورت عمل کنیم :
حالا اگر مجددا تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که به ازای حذف هر Person ، یک Toast بصورت زیر بهمون نمایش داده میشه :
خوب در نهایت به پایان این بخش رسیدیم و تونستیم ظاهر کلی برنامه مون رو به اینصورت تغییر بدیم :
خوب عزیزان این قسمت هم به پایان رسید و امیدوارم که لذت برده باشین . مبحث استایل دهی هم دیگه کلا تموم شد و از قسمت های بعدی با مفاهیم مهم تر React در خدمتتون خواهم بود ! در رابطه با این مقاله اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن محتوای مقالات کمک کنین و همچنین اگر مایل بودین مقاله های من رو با بقیه دوستان به اشتراک بزارین تا هم اینکه خستگیم در بره و هم اینکه با انرژی بیشتری براتون بنویسم :) در آخر ، مراقب خودتون باشید :)
