آموزش ساخت Modal ساده در React با استفاده از create-react-app



visibility  
mode_comment   ۰

در این آموزش قصد داریم ساخت Modal در React با استفاده از create-react-app رو از صفر به شما آموزش بدیم و شما رو با اون آشنا کنیم.

پیش نیازها

برای اینکه این مطلب رو به خوبی متوجه بشید، بهتره که حداقل بصورت مقدماتی با React آشنا باشید و در مورد state و props اطلاعاتی رو داشته باشید. همچنین باید Node بر روی سیستم شما نصب باشه و با استفاده از npm ماژول create-react-app رو بصورت سراسری یا global نصب کرده باشید. اگر این کار رو نکردید، دستور npm i -g create-react-app رو در command line اجرا کنید تا این ماژول براتون نصب بشه.

ساخت پروژه با create-react-app

درون command line وارد مسیر Desktop یا مسیر دلخواه میشم و دستور create-react-app basic-modal رو اجرا میکنم. با اینکار یک پوشه جدید بنام basic-modal در اون ساخته میشه و چیزهایی که برای اون نیاز هست بصورت اتوماتیک نصب میشه. شما باید چند لحظه منتظر بمونید تا فرآیند نصب به پایان برسه که بستگی به سرعت اینترنتتون داره.

ساخت کامپوننت Modal

قبل از اینکه component مورد نظرتون رو بسازید و کدی رو بنویسید، مراحل زیر رو انجام بدید تا فایلهایی که نیاز نیستند رو حذف کرده و همچنین فایلهای جدیدی که برای پروژه فعلی نیاز هست رو به وجود بیاریم:

  • فایلهای App.css و App.test.js و logo.svg رو از پوشه src حذف کنید.
  • یک پوشه بنام components در پوشه src به وجود بیارید
  • یک پوشه بنام Modal در پوشه components به وجود بیارید
  • در پوشه Modal دو فایل Modal.js و Modal.css رو بسازید

بعد از کارهای بالا، ساختار پروژه بصورت زیر خواهد بود:

در فایل Modal.js کدهای زیر رو قرار میدم:

کامپوننت Modal سه props بصورت زیر داره:

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back
  • show : یک مقدار Boolean هست که در هر لحظه مشخص میکنه که Modal باید نمایش داده بشه یا خیر.
  • close : یک تابع هست و زمانی که بر روی دکمه Cancel یا انصراف کلیک میشه، این تابع فراخوانی شده و Modal بسته میشه.
  • children : همان محتوایی هست که هنگام استفاده از کامپوننت Modal درون اون قرار داده میشه.

یک بخش بنام modal-footer قرار داده شده که با کلیک کردن بر روی دکمه close، میتونین Modal رو به راحتی ببندید. برای modal-wrapper هم یک ویژگی style قرار دادیم و درون اون با استفاده از props.show تصمیم گرفتیم که Modal چه موقع نمایش داده بشه و چطور به بالا و پایین حرکت کنه.

در خط 3 فایل Modal.css رو وارد پروژه کردیم. کدهای زیر رو درون این فایل قرار میدیم تا استایلهای مورد نظر به کامپوننت Modal اعمال بشه:

به همین راحتی. کدهای زیر رو هم درون فایل App.js قرار میدیم:

در App.js دو متد بصورت زیر وجود دارند:

  • openModalHandler : این متد ویژگی isShowing در state رو برابر با true قرار میده و باعث میشه که Modal باز بشه
  • closeModalHandler : این متد ویژگی isShowing در state رو برابر با false قرار میده و باعث میشه که Modal بسته بشه

در متد render، زمانی که isShowing برابر با true باشه، یک div با کلاس back-drop رندر میشه و باعث میشه که هر جای دیگه به غیر از Modal در صفحه کلیک کنید، Modal بسته بشه. یک دکمه هم با کلاس open-modal-btn قرار دادیم و برای onClick اون همون متد openModalHandler رو قرار دادیم و با کلیک بر روی این دکمه، Modal مورد نظر باز میشه.

در خط 3 هم کامپوننت Modal رو import کردیم و در متد render از اون استفاده کردیم و props های مورد نظرمون رو به اون پاس دادیم. props.children همین متنی هست که درون تگ Modal قرار میگیره.

حالا در command line دستور yarn start یا npm start رو اجرا کنید و چند لحظه منتظر بمونید. با اینکار create-react-app برنامه رو برای شما اجرا میکنه و بصورت اتوماتیک در آدرس localhost:3000 باز میکنه و میتونین برنامه رو تست کنید. هر تغییری هم در کدها بدین، مرورگر بصورت اتوماتیک رفرش میشه و آخرین تغییرات رو به شما نشون میده.

در این آدرس میتونین بصورت آنلاین این Modal رو تست کنید و دموی اون رو مشاهده کنید.

نتیجه گیری

در این مطلب با استفاده از create-react-app یک Modal ساده رو در React به وجود آوردیم.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.