ساختار پروژه React و معرفی فایلهای مهم
بعد از ایجاد یک پروژه با Create React App (CRA) یا هر روش دیگری، پوشهها و فایلهایی بهصورت پیشفرض ساخته میشوند. در این بخش، به معرفی ساختار استاندارد پروژه React و نقش فایلهای مهم میپردازیم.
۱. ساختار کلی یک پروژه React
وقتی یک پروژه React جدید ایجاد میکنید، ساختار اولیه چیزی شبیه به این خواهد بود:
my-app/
├── node_modules/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ ├── manifest.json
│ ├── robots.txt
├── src/
│ ├── components/
│ ├── pages/
│ ├── assets/
│ ├── App.js
│ ├── index.js
│ ├── styles.css
├── .gitignore
├── package.json
├── README.md
هر یک از این پوشهها و فایلها وظایف خاصی دارند که در ادامه بررسی میکنیم.
۲. معرفی پوشهها و فایلهای مهم
📌 ۱. node_modules/
🔹 این پوشه شامل تمامی بستههای نصبشده از npm است.
🔹 نیازی نیست این پوشه را تغییر دهید؛ در صورت حذف، میتوان با اجرای npm install دوباره آن را ایجاد کرد.
📌 ۲. public/ (فایلهای عمومی پروژه)
این پوشه حاوی فایلهایی است که مستقیماً توسط مرورگر در دسترس هستند.
🔹 فایلهای مهم در public/
✅ index.html
- فایل اصلی HTML که برنامهی React در آن بارگذاری میشود.
- div با id="root" در این فایل، محلی است که کل برنامه React در آن رندر میشود.
✅ favicon.ico
- آیکون کوچک نمایش دادهشده در تب مرورگر.
✅ manifest.json
- برای تنظیمات PWA (برنامههای وب پیشرفته).
✅ robots.txt
- برای تنظیمات مرتبط با موتورهای جستجو و SEO.
📌 ۳. src/ (کدهای اصلی برنامه)
تمام کدهای اصلی React در این پوشه قرار دارد. این پوشه مهمترین بخش پروژه است.
🔹 فایلهای مهم در src/
✅ index.js
- نقطه ورود اصلی پروژه.
- React را در index.html بارگذاری میکند.
🔹 مثال کد index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
✅ App.js
- کامپوننت اصلی برنامه.
- تمام بخشهای دیگر درون این کامپوننت قرار میگیرند.
🔹 مثال کد App.js:
function App() {
<
return (
div
>
<h1
>به پروژه React خوش آمدید!
</h1
>
</div
>
);
}
export default App;
✅ components/
- شامل کامپوننتهای مستقل مانند دکمهها، کارتها و فرمها.
- مثلاً میتوان یک کامپوننت Button.js ایجاد کرد.
✅ pages/
- شامل صفحات اصلی برنامه مانند صفحه اصلی، داشبورد، درباره ما و غیره.
- مثال: Home.js, Dashboard.js
✅ assets/
- برای ذخیره فایلهای استاتیک مانند تصاویر، آیکونها، فونتها و ویدیوها.
✅ styles.css
- فایل اصلی استایلهای پروژه.
📌 ۴. فایلهای پیکربندی مهم
✅ .gitignore
- مشخص میکند که چه فایلهایی نباید در گیت (Git) ذخیره شوند (مثلاً node_modules/).
✅ package.json
- لیستی از وابستگیهای پروژه و تنظیمات مربوط به npm.
- مهمترین بخشهای آن:
🔹 مثال package.json
{
"name": "my-app",
"version": "1.0.0",
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
}
}
✅ README.md
- شامل توضیحات کلی دربارهی پروژه.
۳. سفارشیسازی ساختار پروژه
پس از راهاندازی اولیه، میتوانید برای سازماندهی بهتر پروژه، پوشههای بیشتری اضافه کنید:
✅ hooks/ – برای ذخیره کدهای سفارشی Hook مانند useFetch.js.
✅ context/ – برای مدیریت State مرکزی با Context API.
✅ services/ – برای ذخیره درخواستهای API و توابع مرتبط با دادهها.
۴. نتیجهگیری
📌 پوشهی src/ مهمترین بخش پروژه است، زیرا تمام کدهای React در آن قرار دارد.
📌 پوشهی public/ شامل فایلهای عمومی مانند index.html است.
📌 برای مدیریت بهتر پروژههای بزرگ، بهتر است پوشههایی مانند components/, pages/, hooks/ و services/ را اضافه کنید.
