ساختار پوشه بندی مناسب برای پروژه های مقیاس بزرگ در React.js

ساختار یا معماری پروژه نقش مهمی در نگهداری پروژه دارد. یک ساختار پوشه ای خوب به توسعه دهندگان در تیم کمک می کند تا بتوانند از طریق آن آسان و با هم ارتباط برقرار کنند و روند توسعه به صورت استاندارد پیش برود

اکوسیستم React.js به توسعه دهندگان آزادی می دهد تا بتوانند پروژه را آنطور که دوست دارند ساختار دهند

با این حال ، اگر تازه یک پروژه در مقیاس متوسط تا بزرگ را شروع می کنید،اگر برنامه و پلنی برای ساختار بندی و قالب بندی پروژه نداشته باشید دیر یا زود گیجی و سردرگمی گریبانگیر شما و تیم شما میشود و روند توسعه در ادامه سخت و سخت تر خواهد شد

بنابراین ، چگونه می توان پروژه React خود را ساختار بندی کرد؟

ببینید، مقالات زیادی وجود دارد که در مورد رویکردهای مختلف صحبت می کنند. صادقانه بگویم ، هیچ معماری برتری وجود ندارد که بتوان گفت برای انواع پروژه های مختلف با هدف ها مختلف مناسب است

آنچه که من در اینجا به شما نشان خواهم داد ، به سادگی یک روش فکری برای ساختار یک پروژه React است. شما می توانید برخی از قسمتها یا همه آنها را برای پروژه خود در نظر بگیرید. این انتخاب شماست

بنابراین ، من در مورد هر یک از عملکردهای پوشه توضیح خواهم داد و دلیل آن را اضافه می کنم.

1 - پوشه Assets

این پوشه شامل دو پوشه دیگر برای تصاویر و SCSS است،در اینجا من از SCSS استفاده می کنم اما اگر شما از آن در پروژه خود استفاده نمی کنید مشکلی ندارد،میتوانید نام آن را به css یا styles تغییر دهید
اگر ترجیح میدهید style خود را در منطقه component خودش بگذارید مشکلی نیست،اما در اینجا می میتوانید style های Global و مشترک در پروژه را در اینجا بگذارید

2 - پوشه Components

پوشه کامپوننت ها شامل مجموعه ای از بخش های UI مانند دکمه ، قسمت ورودی سفارشی ، مدال و غیره است که در میان پرونده های پروژه به اشتراک گذاشته می شود و مورد استفاده قرار می گیرد.

اگر دوست ندارید نام آن «Components» باشد می توانید نام آن را به «elements» یا «UIs» تغییر دهید.

3- پوشه Pages

این پوشه در واقع Route های برنامه ما را منعکس می کند،با برداشتی که از نام فولدر می توان کرد باید گفت درواقع هر فایل در این پوشه هنگام بارگذاری یک Route صدا زده می شود و component های ساخته شده در پروژه در این صفحات استفاده می شوند

4-پوشه Parts (گاها Layout)

پوشه Parts تقریباً مشابه پوشه Components است. این شامل اجزای قابل استفاده مجدد است که در صفحات استفاده می شود.

تفاوت در این است که اجزای موجود در پوشه Parts منعکس کننده قسمتهایی از صفحه مانند Footer ،SideBar و Headerهستند ، در حالی که پوشه کامپوننت ها شامل اجزای مستقل UI مانند دکمه ، فرم یا قسمت ورودی هستند.

گاهی اوقات ، یک Part میتواند تشکیل شده از چند Component باشد

5 - پوشه Services

پوشه services از معماری Angular الهام گرفته شده است.در Angular قابلیتی به نام Dependency Injection وجود دارد که به ما امکان تزریق سرویسی را در هر نقطه از پروژه می دهد. بیشتر اوقات ، یک سرویس برای مدیریت ادغام API استفاده می شود.

سرویس یک کامپوننت نیست. این به سادگی یک تابع javascript برای مدیریت ادغام API بر اساس نوع داده است.

برای اینکه روشن تر باشد ، در اینجا نحوه نوشتن سرویس در اکثر پروژه ها نشان داده شده است.

و در اینجا چگونگی فراخوانی آن در کامپوننت . . .

من از axios برای فراخوانی API استفاده می کنم.

ممکن است بپرسید ، چرا باید در صدا کردن API از services استفاده کنیم وقتی میتوان آن را در کامپوننت ها نوشت؟

خوب ، اگر ما بخواهیم API را در کامپوننت های مختلف ، توسط توسعه دهندگان مختلف فراخوانی کنیم ، چه اتفاقی رخ می دهد؟.شرط می بندم ، کدها استاندارد نخواهند شد و در صورت تغییر توسعه دهندگان ، نگهداری آنها دشوار است.با استفاده از سرویس ها ، می توانیم این مسئله را با متمرکز کردن تماس API بر اساس نوع داده حل کنیم. اگر کسی می خواهد از آن استفاده کند ، فقط با صدا کردن آن در Service قابل انجام باشد

6 - پوشه Store (اگر از Redux استفاده می کنید)

اگر تصمیم دارید از redux در پروژه خود استفاده کنید ، پوشه Store به سراغتون میاد. در داخل آن ، زیر پوشه actions وreducers برای مدیریت حالت های redux وجود دارد.

عمدتا ، actions وreducers در اجزای صفحه فراخوانی می شوند ، بنابراین آنها معمولاً براساس صفحاتی که از آنها استفاده می کنند ، نامگذاری می شوند.

اگر برنامه شما یک پروژه در مقیاس کوچک تا متوسط است ، سعی کنید قبل از استفاده از redux ، استفاده از props و state را به حداکثر برسانید. اگر این خیلی پیچیده است ، خوب ، می توانید از redux استفاده کنید.

7 - پوشه Utils

پوشه utils فقط محلی برای یافتن برخی از توابع کاربردی است که به طور مکرر در پروژه استفاده می شود. پرونده ها در پوشه utils فقط باید حاوی برخی از توابع مانند قالب بندی تاریخ ، تبدیل رشته و غیره باشند.

آیا از ابتدا لازم است همه پوشه ها را وارد کنیم؟

خوب ، نه. از ابتدای پروژه لازم نیست همه پوشه ها را وارد کنید.

به عنوان مثال ، اگر مطمئن نیستید از redux استفاده کنید یا استفاده نمی کنید ، لازم نیست که یک پوشه Store ایجاد کنید.

در صورت اطمینان از اینکه پروژه شما فقط تعداد کمی از API ها را مصرف می کند ، پوشه Services نیز لازم نیست.

با این حال ، پوشه های assets، components، parts و pages مهم است که از ابتدا برای مدیریت کدها مرتب شوند.

شما چی فکر میکنید؟

اگر نظری دارید ، لطفاً آزادانه نظر دهید و ایده های خود را مطرح کنید تا بتوانیم در این مورد نظرات بیشتری داشته باشیم.