پروژه ی عملی ری اکت : پپروژه همبرگرساز

React Practical Project

شروع پروژه عملی ری اکت: پروژه همبرگرساز

به پروژه عملی ری اکت یعنی پروژه همبرگرساز (burger builder) خوش آمدید! ما در چهار فصل قبل مباحث بسیاری را در رابطه با React یاد گرفته ایم و حالا وقت استفاده عملی از آن ها است. همانطور که در جلسه پایانی از فصل چهارم برایتان توضیح دادم، این پروژه را در طول دوره پیشرفته تر خواهیم کرد و پس از هر چند فصل دوباره به سراغش می آییم. همچنین از آنجایی که react hooks یک قابلیت بسیار جدید است در این فصل از آن استفاده نمی کنیم؛ فرض ما در این فصل این است که هنوز چیزی به نام react hooks وجود ندارد اما پس از توضیحات مفصل درباره react hooks در فصل های آینده، تمام این پروژه را دوباره با React hooks بازنویسی می کنیم.

پروژه همبرگرساز یک برنامه وب است که در آن کاربران می توانند همبرگر خود را با سلیقه خود و مواد اولیه دلخواهشان بسازند و سپس سفارش خود را ثبت کنند.

در اینجا سوال مهمی پیش می آید: از کجا شروع کنیم؟

چطور برای پروژه های react برنامه ریزی کنیم؟

قانون ثابتی برای ریختن طرح برنامه های react وجود ندارد اما سه مرحله مهم در برنامه نویسی react تقریبا در هر پروژه ای وجود دارند:

مرحله اول: تعیین ساختار/درخت کامپوننت ها

معمولا در پروژه های front-end یک طراح و یا خودتان طرح اولیه وب سایت را طراحی کرده اید. برخی اوقات هم طرح اولیه در ذهن خودتان است. در هر صورت، باید این طرح را به کامپوننت های مختلف قسمت بندی کرده و به نوعی ساختار کامپوننت ها و مکان و ویژگی های هر کدام را مشخص کنید (مثلا کدام کامپوننت ها باید داخل کدام کامپوننت ها باشند - روابط پدر و فرزندی). ممکن است بعدا و در هنگام کدنویسی این ساختار را تغییر بدهید اما در هنگام شروع باید یک نقشه اولیه داشته باشید تا بر اساس آن جلو بروید.

مرحله دوم: تعیین state (داده ها)

تمام داده هایی که در برنامه خودتان وجود دارد را در یک قسمت خاص جمع کنید و سپس با بررسی کامل تعیین کنید که کدام داده ها باید در state مدیریت شوند. به طور مثال در پروژه همبرگرساز ما باید مواد اولیه (مثلا گوشت، گوجه و...) را مدیریت کنیم و بدانیم هر کاربر کدام را انتخاب کرده است تا بدانیم چه چیزی را به کاربر نمایش دهیم و همچنین قیمت همربرگر را چقدر اعلام کنیم.

مرحله سوم: تعیین نوع کامپوننت ها

ما دو نوع کامپوننت داریم: کاربردی و کلاس-محور. شما باید بررسی کنید که برنامه شما با کدام کامپوننت بهتر کار می کند. یادتان باشد که ما در این فصل از react hooks استفاده نمی کنیم اما شما می توانید این کار را انجام بدهید.

بسیاری از اوقات در هنگام کدنویسی پروژه حس می کنیم که تقسیم بندی که برای یک قسمت خاص در نظر گرفته ایم اصلا بهینه نیست و آن را عوض می کنیم، و یا نوع کامپوننت را از کلاس محور به کاربردی تغییر می دهیم و... بنابراین تغییرات در طول برنامه نویسی عادی است. قرار نیست نقشه اولیه شما تا آخر ثابت باشد بلکه احتمال تغییر آن زیاد است اما نداشتن نقشه اولیه باعث سردرگمی خودتان خواهد شد.

طرح کلی همبرگرساز

ما می خواهیم همین سه مرحله را برای پروژه همبرگرساز خودمان هم پیاده کنیم. بنابراین ابتدا طرح کلی سایت را می خواهیم. اول از همه یک نوار navigation در بالای سایت می خواهیم که حداقل دو گزینه builder (همبرگرساز) و orders (سفارشات) را داشته باشد. سپس در سمت چپ navigation نیز یک لوگوی ساده قرار می دهیم.

برای صفحه اصلی سایت می خواهیم یک همبرگر بزرگ داشته باشیم که پیش نمایشی برای همبرگر دلخواه کاربر است و زیر خود قیمت همبرگر را به کاربر نشان میدهد. سپس در قسمت پایین تر آن یک مجموعه کنترل داشته باشیم (دکمه ها و input های مختلف) تا کاربر به صورت پویا مختلفات و مواد اولیه همبرگر را انتخاب کند. پایین تر از مجموعه کنترل ها نیز یک دکمه check out (تکمیل خرید و ثبت سفارش) خواهیم داشت که کاربر با کلیک روی آن به سبد خرید خود می رود تا سفارش را تکمیل کند.

حالا زمان تصمیم گیری در مورد ساختار کامپوننت ها است. احتمالا کامپوننت اصلی مان App باشد، سپس درون آن یک کامپوننت دیگر به نام Layout طراحی می کنیم که دو قسمت اصلی دیگر را در خود نگه میدارد: header (که بالای صفحه است) و غیر از header که بقیه محتوای صفحه است.

layout احتمالا دارای چند کامپوننت دیگر خواهد بود که مسئول navigation و خود محتوا هستند. کامپوننتی که مسئول navigation است باید به دو قسمت تقسیم شود: یک toolbar (همان navigation عادی) و یک منوی کشویی. دلیلش هم این است که برنامه ما باید responsive باشد و در موبایل ها نیز به راحتی نمایش داده شود. سپس یک backdrop خواهیم داشت که پس زمینه ما خواهد بود و نهایتا props.children را خواهیم داشت تا هر مقداری را که خواستیم بتوانیم کامپوننت های مختلف را وارد صفحه کنیم (در هنگام کدنویسی متوجه منظور من خواهید شد).

Toolbar ما باید دارای دکمه drawer (منوی کشویی برای موبایل ها) باشد، باید لوگو را نیز داشته باشد و آیتم ها یا همان لینک های navigation را نیز در خودش قرار دهد. اگر لوگو و لینک های navigation را در کامپوننت های جداگانه خودشان بنویسیم احتمالا می توانیم آن ها را بین toolbar و side drawer (منوی کشویی) به اشتراک بگذاریم تا دوباره کدنویسی نکنیم.

Backdrop نیز تنها حاوی مقداری کد HTML است و هیچ فرزندی نخواهد داشت. تنها مورد باقی مانده props.children است که حاوی صفحات مختلفی خواهد بود اما فعلا فقط صفحه همبرگرساز را برایش در نظر می گیریم. این صفحه همربرگر ساز همانطور که قبلا گفتیم باید دارای مجموعه کنترل هایی باشد که خود این مجموعه کنترل دارای تک کنترل های مختلفی است. سپس باید پیش نمایش همبرگر و یک modal را نیز داشته باشیم. پیش نمایش همبرگر خودش از کامپوننت های مختلف «مواد اولیه» تشکیل شده است. قسمت Modal نیز قرار است props.children را بگیرد که بر اساس آن ما بتوانیم هر چیزی را در آن نمایش دهیم (مثل پیام تایید، جزئیات و توضیحات سفارش و...).