نحوه پیکربندی پروژه های React

در این مقاله میخواهم به این سوال پاسخ بدهم:

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

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

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

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 شامل همه سرویس هایی است که برای ارتباط بین نرم افزار React (front) و یک API (back) استفاده می شوند. یک سرویس واحد عملکردهای متعددی را برای بازیابی داده ها یا ارسال داده ها به یک سرویس خارجی با استفاده از پروتکل 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

اگر با React آشنا هستید ، باید بدانید که عمدتا بر اساس کامپوننت است. اجزاء در واقع قلب هر برنامه React هستند. کل برنامه ، حداقل نمای ارائه ، از بسیاری از اجزای کوچک ساخته شده است.

بنابراین یک جزء چیست؟ منبع

اجزا به شما امکان می دهند UI را به قطعات مستقل و قابل استفاده مجدد تقسیم کنید و در مورد هر قطعه به صورت جداگانه فکر کنید.

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

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

خود را تکرار نکنید (ِDRY)

تقسیم کدهای پایگاه به چندین جزء فقط کار React نیست. این یک الگوی رایج در مهندسی نرم افزار است که روند توسعه و نگهداری آینده را ساده می کند.

در React ، یک کامپوننت بیشتر یک تابع ساده جاوا اسکریپت یا یک کلاس است. معمولاً برای هر جزء یک فایل جدید ایجاد می کنم. در برخی موارد نادر ، من چندین مورد از آنها (توابع یا کلاس ها) را در یک فایل واحد گروه بندی می کنم. یک 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 استفاده نمی شود .

علاوه بر خود اجزاء ، همچنین می توانید شیوه نامه ها یا آزمایشات آنها را به این فهرست اضافه کنید.

پوشه: src/i18n

react-project
├── i18n
│   ├── de.json
│   └── en.json

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

بنابراین ، کلیدها باید برای هر فایل زبان برابر باشند. فقط مقادیر (ترجمه ها) با یکدیگر تفاوت دارند. بعداً با نوشتن قلاب یا جزء سفارشی خود می توانید به آسانی آن فایل های زبان را جست و جو کنید.

پوشه: src/modules

react-project
├── modules
│   ├── logger.js
│   └── session.js

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

پوشه: src/pages

react-project
├── pages
│   ├── Home
│   │   ├── components
│   │   │   ├── Dashboard.js
│   │   │   └── Welcome.js
│   │   └── index.js
│   ├── Login.js
│   └── Profile.js

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

یک صفحه ممکن است شامل فهرست component خود باشد که شامل اجزای “محلی” است که فقط در این صفحه استفاده می شوند. برای صفحات پیچیده با درخت کامپوننت عمیق ، ممکن است بخواهید React Context API را بررسی کنید که انتقال propها در درخت و مدیریت “وضعیت صفحه” جهانی را بسیار ساده تر می کند.

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

react-project
├── stores
│   ├── language.js
│   └── user.js

این فهرست شامل تمام حالتهای React global است که از هر جزء درون برنامه قابل دسترسی است. در حالی که Redux احتمالاً محبوب ترین راه حل برای مدیریت وضعیت global است ، من ترجیح می دهم از zustand استفاده کنم . شروع کار بسیار آسان است و API آن واقعاً ساده است.

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

react-project
├── tests
│   ├── language.test.js
│   └── utils.test.js

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

فهرست: src/utils

react-project
├── utils
│   ├── hooks
│   │   ├── useChat.js
│   │   ├── useOutsideAlerter.js
│   │   ├── useToast.js
│   ├── providers
│   │   ├── HomeContextProvider.js
│   │   ├── ToastContextProvider.js
│   ├── colors.js
│   ├── constants.js
│   ├── index.js

در اینجا ، ما مجموعه ای از ابزارهای مفید مانند: custom hooks ، context provider ، ثابت ها و توابع کمکی را داریم. با خیال راحت مطالب بیشتری را در اینجا اضافه کنید.

همه با هم

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

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

امیدوارم این کمک کوچکی برای افرادی باشد که نمی دانند چگونه برنامه React خود را ایجاد کنند یا نمی دانند چگونه شروع کنند.