soheib-kiani/folder-structure-react

React folder structure from intermediate to advanced level.

Folder structure in React - ساختار فولدر ها داخل ریکت

به دوسطح intermediate و advance تقسیمش کردم که خیلی خلاصه سعی میکنم اونا رو توضیح بدم :

Assets : بیشتر محل ذخیره فونت - عکس¬ – لوگو کابرد داره و اینکه همیشه پای ثابت همه پروژه های ریکتی هستش.

Components : این مورد شاید یکم ابهام داشته باشه چون ما هم private و shared کامپوننت داریم. shared ها همیشه داخل فولدر مخصوص به اون ویژگی قرار میگیرن به این معنی که فقط در یک قسمت خاص کاربرد دارن. مثلا ما داخل صفحه x فقط نیاز به کامپوننت modal داریم که مخصوص این صفحه هستش و در صفحات دیگر کاربردی نداره. ولی کامپوننت هایی رو داریم که بصورت global تعریف میشن و داخل بیشتر صفحات بکار میرن.

Context : سراغ مفهوم context نمیرم ولی نکته مهمی داخل این پروژه باید بهش توجه بشه اینکه ما test های context رو داخل همین پوشه بنویسیم و نیایم فایل تست هامون رو داخل یک folder جداگونه تعریف بکنیم.

data : محل خوندن فایل های json و همچنین دیتا¬های مورد نیاز پروژه. من خودم برای خوندن api هام ازاین folder استفاده میکنم.

hooks : این هم مثل کامپوننت ها هستش که باید مشخص بکنیم چه هوک هایی بیشتر در صفحات کاربرد دارن و چه هوک هایی فقط در یک فانکشن یا صفحه مشخص کابرد دارند. نکته مهم دیگه تست های این قسمت هم باید داخل همین folder تعریف بشه.

pages : صفحات ما در این قسمت قرار میگیرن که میتونیم به اینصورت تعریف کنیم. Folder ثبت نام که داخلش فایل هایی مثل ثبت شماره – ثبت اطلاعات شخصی و ... درصفحات مجزا تعریف شده باشهو مثال راحت ترش رو بگم مثل اینه :
register/phoneNumber register/detail

utils : از این فولدر ما برای function به اصطلاح کوچیک استفاده میکنیم. حالا این فانکشن ها هر کدومشون یه تسک خاصی رو انجام میدن و از همه مهم تر این فانکشن ها تا جای ممکن باید pure function باشن.

layouts : یکسری layout هستن مثل navigation – footer – sidebar اینا داخل این فولدر تعریف میشن.

services : برای کار با api ها کاربرد داره.

Lib : به اصظلاح بهش میگن نقشش در third-party library ها هستش. داخل پروژه های در scale بزرگ یکسری از پکیج ها و کتابخانه هستن که باید بصورت جداگانه تعریف بشن تا از تکرار کد ها جلوگیری بشه مثلا axios.
Features : و اما مهم ترینشون که واقعا کار با این مورد یکی از سخت ترین ها هستش چون با تجربه به دست میاد. یک کابردش رو میگم شاید کمکت کردو شما یه پروژه های آوردی بالا و بابش پول پشتیبانی میگیری. حالا کارفرما میگه شما زحمت بکش یه todolist بهش اضافه بکن. خب اینجاس که ساختار پروژت خیلی بهت کمک میکنه. تو میای داخل همین folder یک ویژگی جدیدی درست میکنی و از این به بعد هندل کردن featureهای جدید خیلی برات راحت تر میشه.

Contact me

• email
• Linkedin