الگوریتم اول

لطفا صبر کنید...

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