03. آشنایی با ساختار پوشه ها و فایل های پروژه

سلام رفقا ، به پارت سوم از سری مقالات "مقدمات React" خوش اومدین . تا اینجا ما اومدیم بطور کامل با پکیج create-react-app اشنا شدیم و با استفاده از اون پروژه مون رو ایجاد کردیم و قرار شد که با ساختار اولیه فایل ها و پوشه های پروژه مون در این قسمت آشنا بشیم و ببینیم که هر کدومشون چه نقشی رو بر عهده دارن ؟! خوب منتظر چی هستین ؟ بیاین شروع کنیم ...

بعد از اینکه با create-react-app پروژه ی جدیدی رو ایجاد میکنیم ، ساختار پیش فرض پروژه مون بصورت زیر هست :

پوشه ی node-modules :

· تمام پکیج های create-react-app و تمام Dependency هایی که به مرور به پروژه مون اضافه میکنیم در داخل این فولدر قرار میگیرن و ما اصلا قرار نیست که با اون ها و محتوای این فولدر سروکار داشته باشیم .

پوشه ی public :

· این پوشه ، محل قرارگیری فایل های استاتیک پروژه هست که توسط وب سرور بین کاربرها توزیع میشه . معمولا فایل های داخل پوشه ی public در مرورگر کش میشن و نیازی نیست که هر بار توسط مرورگر کاربر دانلود بشن . در داخل این پوشه ، تنها یک فایل HTML بنام index.html وجود داره و تا آخر پروژه هیچ فایل HTML دیگه ای رو قرار نیست به این پوشه اضافه کنیم ! در داخل این فایل یک تگ div با آیدی root داریم و نهایتا تمام کامپوننت هایی که تعریف میکنیم ، توسط React در داخل این تگ رندر میشن ! محتوای فایل index.html رو بصورت زیر تغییر میدیم :

همونطور که مشخصه در داخل این فایل ، یک تگ div با “id=”root وجود داره . بازهم تاکید میکنم که این عنصر خیلی مهمه ، چون عنصری هست که کل برنامه ی ما در داخل اون قرار میگیره . البته اگر نیاز داشتیم که فایلهای دیگه ای مثل فایلهای CSS رو در داخل فایل HTML بارگذاری کنیم یا meta تگ های بیشتری اضافه کنیم ، میتونیم این کارها رو در داخل همین فایل HTML انجام بدیم ، از این نظر مشکلی وجود نداره !

فایل manifest.json :

یک فایل JSON هست که اطلاعات meta مثل اسم برنامه ، Favicon مورد استفاده ، url ابتدایی و غیره رو در داخل خودش نگهداری میکنه و ازش در داخل نرم افزارهای PWA استفاده میشه و چون که ما با PWA کاری نداریم این فایل رو حذف میکنیم .

پوشه ی src :

مهم ترین پوشه برای ما پوشه ی src هست ، چراکه تمام فایل های داینامیک در داخل این پوشه قرار میگیرن . اگر قرار هست فایلی توسط کدهای جاوااسکریپت import بشه یا توسط کدهای js محتواش تغییر کنه ، باید اون فایل رو در داخل همین پوشه قرار بدیم . از بین تمام فایل هایی که بصورت پیشفرض در داخل این پوشه هستن ، فایلی به نام index.js وجود داره که فایل خیلی مهمی هست . اگر بازش کنیم ، میبینیم که کامپوننت App رو داره به اینصورت render میکنه :

شاید در نگاه اول عجیب بنظر برسه که ما چطور میتونیم فایل هایCSS رو در داخل یک فایل جاوااسکریپتیimport کنیم ?!جواب این سوال به وجودwebpack مربوط میشه ، چون webpackهنگام کامپایل نهایی محتوای فایل ها رو در داخل فایل HTMLمون تزریق میکنه . اگر به قطعه کد بالا دقت کنیم متوجه میشیم که فایلApp.js به اینصورت import شده و خبری از پسوند .js نیست و اگر نزاریمش مشکلی پیش نمیاد:

حالا اگر وارد فایل App.js بشیم ، اولین و تنها کامپوننت پروژه ی فعلیمون رو مشاهده میکنیم که بصورت زیر هست :

اما از اونجایی که ما با این کدها کاری نداریم و میخوایم پروژه ی خودمونو بنویسیم ، پس تمام کدهای JSX بالا رو حذف میکنیم و فقط div با کلاس className=”App” رو میزاریم بمونه و بعد در داخلش یک تگ h1 ایجاد میکنیم و عبارت Hi , I’m a React App رو در داخلش مینویسیم و همچنین کد مربوط به import کردن logo رو هم از داخلش حذف میکنیم :

حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، همچین چیزی رو خواهیم دید :

در داخل پوشه ی src ، یک فایل دیگه به اسم App.css وجود داره که حاوی استایل های کامپوننت App هست . تمام کدهای این فایل به جز استایل مربوط به کلاس App. رو هم حذف میکنیم و در نتیجه محتوای این فایل باید بصورت زیر باشه :

یک فایل دیگه به اسم index.css هم وجود داره که استایل های کلی برنامه رو در خودش نگهداری میکنه :

فعلا این فایل رو میزاریم بمونه و باهاش کاری نداریم . فایل App.test.js هم فایلی هست که به ما اجازه تست نویسی میده و چون قرار نیست که ما فعلا کار تست نویسی انجام بدیم ، پس این فایل رو هم حذف میکنیم .

فایل package.json :

تمام اطلاعات نرم افزار مون مثل اسم و نسخه ی نرم افزار (در حال حاضر نسخه ی 17.0.2 کتابخونه ی React) و dependency ها یا وابستگی های پروژه (اسکریپت هایی که پروژه بهشون نیاز داره تا به طور صحیح کار کنه) در داخل این فایل قرار دارن . در واقع فایل package.json یکجورایی شناسنامه ی برنامه مون هست :) همونطور که در زیر میبینیم پروژه مون 4 تا وابستگی داره :

• پکیج react ، قسمت اصلی React هست .
• پکیج react-dom ، ارتباط بین React و DOM رو برای ما برقرار میکنه و مسئول رندر کردن یک کامپوننت در DOM اصلی هست .
• پکیج react-scripts که میشه گفت مراحل اجرای برنامه مون به عهده این پکیج هست . وقتی که ما npm start رو اجرا میکنیم عملاً دستور react-scripts start هست که اجرا میشه . این پکیج حاوی مواردی مثل web server و bable و غیره هست .
  

پس در حالت کلی ما میتونیم بعضی از فایل هایی که در پروژه مون بهشون نیازی نداریم رو حذف کنیم و ساختار پروژه رو بصورت زیر تغییر بدیم :

خوب عزیزان این قسمت هم به پایان رسید ، اگر از مقدمات خسته شدین براتون یه خبر خوش دارم :) چراکه از قسمت بعدی قرار هست رسما کدنویسی با React رو شروع کنیم ! در آخر اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین و اگر که این مطلب براتون مفید بوده ، میتونید با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :)

پس فعلا تا قسمت بعدی ... مراقب خودتونم باشید :)