تا اینجا موارد مورد نیاز برای ایجاد ساختار اولیه پروژه رو گفتیم. این قسمت قراره قالب پروژه رو با چیزایی که یاد گرفتیم ایجاد کنیم و بعد از اون مفاهیم اصلی رو در کنار تکمیل پروژه یاد می گیریم.
اول از همه این تصاویر رو دانلود کنید و در این مسیر قرار بدید:
بعد این ماژول ها رو در این مسیر قرار بدید:
این فایل ها قراره در ادامه مورد استفاده قرار بگیرند.
پوشه components رو در مسیر اصلی پروژه ایجاد کنید و Header.js رو به این صورت درونش ایجاد کنید:
بعد از اون Footer.js رو در پوشه components به این صورت ایجاد کنید:
در نهایت Layout.js رو به این صورت ایجاد و </ Header> و </ Footer> رو درونش فراخوانی کنید:
پراپس Title: عنوان کامپوننت رو در هر صفحه مشخص می کنه.
پراپس Description: توضیحات متادیتای کامپوننت رو در هر صفحه مشخص می کنه.
پراپس Children: اگه از این کامپوننت در جایی استفاده کنیم، عناصری که درونش قرار می گیرن Children محسوب میشن.
برای تعریف مقادیر اولیه Props در Layout.js می تونیم به این صورت عمل کنیم:
در نهایت رو index.js ویرایش می کنیم:
خروجی به این صورت خواهد بود:
خلاصه کار اینه که قالب کلی برنامه رو با استفاده از Layout.js ساختیم و Header / Footer رو درونش فراخوانی کردیم. بعدش این قالب رو در صفحه اصلی با فراخوانی و قرار دادن تمام محتویات index.js درونش، استفاده کردیم. از این به بعد، هر جا که نیاز به <Layout> داشتید، کافیه اون رو فراخوانی کنید و تمام عناصر jsx رو درونش قرار بدید.
