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

ساختار فولدرها در پروژه چگونه باید باشد؟ این پرسش توسط کاربران زیادی مطرح شده و ممکن است سوال شما هم باشد. پس تا انتهای این مطلب با ما همراه باشید تا این موضوع را با هم بررسی کنیم.

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

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

ساختار و معماری زیر یکی از مواردی است که برای خود من قابل نگهداری و قابل اعتماد است و می‌تواند در طراحی پروژه شما هم تاثیرگذار باشد. همچنین توجه داشته باشید که معماری زیر بر اساس یک برنامه ساخته شده با create-react-app و نوشته شده در جاوا اسکریپت است.

دایرکتوری: root

react-project

├── node_modules

├── public

├── src

├── package.json

└── package-lock.json

این ساختار نکته خاصی ندارد و نباید برای شما هم جدید باشد. در واقع یک راه‌اندازی اولیه از برنامه create-react-app را نشان می‌دهد. بخش جالب محتوای فولدر src است که این مقاله بیشتر در مورد آن بحث می‌کند.

بیایید ببینیم در اینجا چه بخش‌هایی داریم؟

react-project

├── api

├── components

├── i18n

├── modules

├── pages

├── stores

├── tests

├── utils

├── index.js

├── main.js

└── style.css

همانطور که مشاهده می‌کنید در وهله اول برنامه به هشت دایرکتوری تقسیم شده است. بنابراین می‌خواهیم از بالا به پایین پیش برویم و هر کدام را بررسی نماییم.

پس ابتدا با دایرکتوری api شروع می‌کنیم.

دایرکتوری: src/api

react-project

├── api

│   ├── services

│   │   ├── Job.js

│   │   ├── User.js

│   ├── auth.js

│   └── axios.js

دایرکتوری api شامل تمام سرویس‌هایی است که ارتباط بین فرانت-اند برنامه و API‌ها در بک-اند را ایجاد می‌کنند. یک سرویس واحد، توابع متعددی را برای بازیابی یا ارسال داده‌ها از یک سرویس خارجی با استفاده از پروتکل HTTP ارائه می‌نماید.

مثلا auth.js توابعی را برای احراز هویت شامل می‌شود و axios.js هم یک نمونه axios مانند درخواست‌های HTTP خروجی و پاسخ‌های ورودی را در خود جای داده است. به علاوه فرآیند تازه‌سازی JWTها نیز در این قسمت انجام می‌شود.

دایرکتوری: src/components

react-project

├── components

│   ├── Job

│   │   ├── Description.js

│   │   └── Preview.js

│   └── User

│   │   ├── Card.js

│   │   ├── Create.js

│   │   └── List.js

اگر قبلا با ری‌اکت کار کرده باشید، باید بدانید که این فریمورک عمدتا مبتنی بر کامپوننت است. به این معنی که کامپوننت‌ها در واقع هسته هر برنامه ری‌اکت هستند. به عنوان مثال کل برنامه یا حداقل view آن (بخش قابل نمایش) از بسیاری اجزای کوچک به نام کامپوننت ساخته شده است.

کامپوننت‌ها به شما این امکان را می‌دهند که رابط کاربری (UI) را به قطعات مستقل و قابل استفاده مجدد تقسیم کنید و برای هر قطعه به صورت مجزا تغییرات را اعمال نمایید.

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

یکی از مزایای کامپوننت‌ها این است که می‌توانند چندین بار در برنامه مورد استفاده قرار ‌گیرند تا توسعه دهنده از دردسر نوشتن کد اضافی نجات پیدا کند.

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

در ری‌اکت هر کامپوننت یک تابع ساده جاوا اسکریپت یا یک کلاس است که معمولا برای هر کامپوننت یک فایل جدید ایجاد می‌شود. در برخی موارد هم می‌توان چندین مورد از آن‌ها (توابع یا کلاس‌ها) را در یک فایل گروه‌بندی کرد. یک کامپوننت UserList.js را تصور کنید که چندین عنصر از UserListItem را رندر می‌کند:

const UserList = ({ users }) => (

  <ul>

    {users.map(user => (

      <UserListItem key={user.userId} user={user} />

    ))}

  </ul>

)

const UserListItem = ({ user }) => <li>{user.name}</li>

در اینجا ترکیب هر دو در یک فایل امری منطقی است. همچنین UserListItem احتمالا توسط هیچ کامپوننت دیگری غیر از UserList استفاده نمی‌شود.

علاوه بر خود کامپوننت‌ها می‌توانید stylesheet یا testهای هر یک را نیز به این دایرکتوری اضافه کنید.

 دایرکتوری: src/i18n

react-project

├── i18n

│   ├── de.json

│   └── en.json

i18n مخفف بین‌المللی‌سازی است و از پشتیبانی زبان برنامه نگهداری می‌کند. این بخش شامل فایل‌های JSON (اساسا اشیایی هستند که دارای const‌هایی به عنوان کلید و ترجمه‌های مرتبط با آن‌ها به عنوان مقادیر) است.

بنابراین کلیدها باید برای هر فایل language برابر باشند و فقط مقادیر (ترجمه‌ها) با یکدیگر تفاوت دارند. همچنین می‌توانید بعدا با نوشتن hook یا کامپوننت سفارشی خود، آن فایل‌های زبان را به راحتی جستجو کنید.

دایرکتوری: src/modules

react-project

├── modules

│   ├── logger.js

│   └── session.js

این بخش شامل برخی از ماژول‌های گلوبال است که می‌تواند برای ورود به سیستم یا به عنوان wrapper برای LocalStorage مرورگر استفاده شود.

دایرکتوری: src/pages

react-project

├── pages

│   ├── Home

│   │   ├── components

│   │   │   ├── Dashboard.js

│   │   │   └── Welcome.js

│   │   └── index.js

│   ├── Login.js

│   └── Profile.js

دایرکتوری pages شامل مسیرهای react-router-dom است که هنگام پیمایش در برنامه به آن‌ها دسترسی پیدا می‌کنیم. در اینجا ما چندین کامپوننت را در یک نمونه بزرگتر جمع آوری کرده‌ایم تا view کامل صفحه نمایش داده شود.

هر صفحه می‌تواند حاوی دایرکتوری کامپوننت خود باشد و این شامل کامپوننت‌های لوکال (محلی) است که فقط در این صفحه استفاده می‌شوند. برای صفحات پیچیده با درخت کامپوننت عمیق، ممکن است بخواهید React Context API را بررسی کنید که ارسال propها در امتداد درخت و مدیریت یک page state گلوبال را بسیار آسان‌تر می‌کند.

دایرکتوری: src/stores

react-project

├── stores

│   ├── language.js

│   └── user.js

این دایرکتوری شامل تمام stateهای گلوبال ری‌اکت که از هر کامپوننتی در برنامه قابل دسترسی است. با این‌که Redux محبوب‌ترین ابزار برای مدیریت stateهای گلوبال است، اما من ترجیح می‌دهم از zustand استفاده کنم. چرا که کار با آن بسیار آسان است و APIهای ساده‌ای هم دارد.

دایرکتوری: src/tests

react-project

├── tests

│   ├── language.test.js

│   └── utils.test.js

دایرکتوری tests شامل تست‌هایی است که به کامپوننت‌های خاصی تعلق ندارند، به عنوان مثال می‌تواند تست‌هایی برای اجرای الگوریتم‌ها باشد. به علاوه می‌توانیم کلیدهای فایل language که در بالا ذکر کردیم را تأیید و مقایسه کنیم تا مطمئن شویم هیچ ترجمه‌ای را برای یک زبان خاص از دست نمی‌دهیم.

دایرکتوری: src/utils

react-project

├── utils

│   ├── hooks

│   │   ├── useChat.js

│   │   ├── useOutsideAlerter.js

│   │   ├── useToast.js

│   ├── providers

│   │   ├── HomeContextProvider.js

│   │   ├── ToastContextProvider.js

│   ├── colors.js

│   ├── constants.js

│   ├── index.js

در این بخش تعدادی ابزار مانند Custom Hook، Context Provider، Constant و Helper Function وجود دارد. پس با خیال راحت می‌توانید موارد بیشتری را در اینجا اضافه کنید.

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

react-project

├── api

│   ├── services

│   │   ├── Job.js

│   │   ├── User.js

│   ├── auth.js

│   └── axios.js

├── components

│   ├── Job

│   │   ├── Description.js

│   │   └── Preview.js

│   └── User

│   │   ├── Card.js

│   │   ├── Create.js

│   │   └── List.js

├── i18n

│   ├── de.json

│   └── en.json

├── modules

│   ├── logger.js

│   └── session.js

├── pages

│   ├── Home

│   │   ├── components

│   │   │   ├── Dashboard.js

│   │   │   └── Welcome.js

│   │   └── index.js

│   ├── Login.js

│   └── Profile.js

├── stores

│   ├── language.js

│   └── user.js

├── tests

│   ├── language.test.js

│   └── utils.test.js

├── utils

│   ├── hooks

│   │   ├── useChat.js

│   │   ├── useOutsideAlerter.js

│   │   ├── useToast.js

│   ├── providers

│   │   ├── HomeContextProvider.js

│   │   ├── ToastContextProvider.js

│   ├── colors.js

│   ├── constants.js

│   ├── index.js

├── index.js

├── main.js

└── style.css

امیدوارم این آموزش راهنمای کوچکی باشد برای افرادی که نمی‌دانند چگونه برنامه ری‌اکت خود را ساختاربندی کرده یا اصلا نمی‌دانند از کجا شروع کنند. در پایان فراموش نکنید که نظرات و سوالات خود را در بخش زیر ارسال نمایید.

همچنین برای یادگیری بیشتر و ارتقای مهارت‌های خود نیز می‌توانید از این دوره آموزشی ری‌اکت در وب سایت راکت بهره‌مند شوید.

منبع