ساختار پروژه 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/ را اضافه کنید.