بخش 9: بررسی ساختار پوشه‌ها و فایل‌ها در پروژه (React با Vite)

""

1. مقدمه کوتاه

در بخش قبل، اولین پروژه React خودت رو با Vite ساختیم و تونستیم اون رو تو مرورگر اجرا کنیم.
اما حالا برای اینکه در مراحل بعدی بتونی به راحتی کد بنویسی و ساختار رو درک کنی، باید بدونی که هر پوشه و فایل در این پروژه چه نقشی داره، چرا وجود داره، و اگر بخوای تغییرش بدی باید چه نکاتی رو بدونی.

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

2. تعریف و توضیح مفهومی

وقتی یک پروژه React با Vite یا Create React App ساخته میشه، یک ساختار پیش‌فرض درست میشه تا:

  • کد سمت کاربر (Front-end) مرتب باشه.
  • کد اجرا بشه و به راحتی قابل توسعه باشه.
  • برای Build و انتشار آماده باشه.

ساختار پیش‌فرض به شما کمک می‌کنه:

  1. کدها رو دسته‌بندی کنی (کامپوننت‌ها، استایل‌ها، تصاویر و …)
  2. تست و نگهداری راحت‌تر بشه
  3. تیم‌های برنامه‌نویسی بتونن با هم همکاری کنن چون همه می‌دونن هر فایل کجاست.

3. ساختار کلی پروژه در Vite

بعد از اجرای دستور ساخت، ساختار پوشه‌ای مشابه این رو می‌بینی:

my-first-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js
└── README.md

الان قدم‌به‌قدم و با مثال عملی، نقش هرکدوم رو توضیح میدیم.

4. پوشه و فایل‌ها — توضیح خط به خط

4.1. پوشه node_modules/

  • چی هست؟
    این پوشه همه کتابخانه‌ها و پکیج‌هایی رو که پروژه‌ات نیاز داره، ذخیره می‌کنه.
  • چطور ساخته میشه؟
    وقتی دستور npm install رو اجرا می‌کنی، npm میره و وابستگی‌ها رو دانلود می‌کنه.
  • آیا باید تغییرش بدیم؟
    خیر ❌. مستقیم داخل این پوشه نباید تغییری بدی.
  • نکته مهم:
    این پوشه خیلی بزرگه، ولی نباید توی Git یا نسخه‌های بکاپ آپلودش کنی.

📌 مثال:

node_modules/react/        → کدهای خود React
node_modules/react-dom/    → کدهایی که React رو به مرورگر متصل می‌کنه
node_modules/vite/         → کدهای مخصوص ابزار Vite

4.2. پوشه public/

  • چی هست؟
    همه فایل‌های استاتیک (ثابت) که بدون تغییر باید مستقیماً در مرورگر لود بشن اینجا قرار میگیرن.
  • کاربرد اصلی:
    قرار دادن تصاویر، آیکون‌ها، فونت‌ها و فایل‌های ثابت.
  • مزیت:
    فایلی که اینجا هست بدون پردازش توسط Vite لود میشه.
  • نکته مهم:
    اگر فایل public/logo.png باشه، در کد می‌تونی با مسیر /logo.png بهش دسترسی پیدا کنی.

📌 مثال عملی استفاده:

// نمایش تصویر از public
function App() {
  return <img src="/vite.svg" alt="Vite Logo" />;
}

4.3. پوشه src/

اینجاست که بیشترِ کد شما نوشته میشه.

4.3.1. App.jsx

  • کامپوننت اصلی برنامه.
  • محل شروع UI.
  • معمولاً شامل ساختار کلی و استفاده از بقیه کامپوننت‌ها.

📌 نسخه ساده:

function App() {
  return (
    <div>
      <h1>سلام دنیا!</h1>
    </div>
  );
}
export default App;

4.3.2. main.jsx

  • نقطه ورودی جاوااسکریپت.
  • اینجا React به index.html متصل میشه.

📌 پیش‌فرض Vite:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

تحلیل:

  1. ReactDOM.createRoot → جدیدترین روش React 18 برای رندرینگ.
  2. document.getElementById('root') → به عنصر HTML با id=”root” وصل میشه.
  3. <React.StrictMode> → خطاها و هشدارها رو در حالت توسعه بهتر نشون میده.

4.3.3. index.css

  • فایل استایل کلی پروژه.
  • روی همه برنامه اثر داره.

📌 مثال:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

4.3.4. App.css

  • استایل فقط برای کامپوننت App.
  • اگر CSS Modules استفاده کنی، این فایل محلی خواهد شد.

4.4. فایل index.html

  • صفحه HTML پایه پروژه.
  • همه کد React روی یک div به نام root قرار میگیره.

📌 نسخه Vite:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

نکات:

  • حذف div#root باعث ارور میشه.
  • اسکریپت باید به main.jsx اشاره کنه.

4.5. فایل package.json

  • شناسنامه پروژه.
  • شامل:
  • نام و نسخه پروژه
  • لیست وابستگی‌ها
  • دستورات npm

📌 مثال:

{
  "name": "my-first-react-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

4.6. فایل vite.config.js

  • محل سفارشی‌سازی تنظیمات Vite.
  • برای پیکربندی Alias، Plugins و… استفاده میشه.

📌 مثال ساده:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

4.7. فایل README.md

  • راهنمای پروژه.
  • معمولاً شامل نحوه نصب و اجرای کد.

5. نکات حرفه‌ای در مدیریت ساختار پروژه

  • نام‌گذاری پوشه‌ها: بهتره برای کامپوننت‌ها یک پوشه جدا مثل src/components بسازی.
  • مدیریت استایل‌ها: CSS کلی در index.css، CSS جزئی در کنار هر کامپوننت.
  • فایل‌های بزرگ: اگر App.jsx بزرگ شد، آن را به چند فایل تقسیم کن.

6. اشتباهات رایج

  1. جابجایی فایل‌های اصلی (مثل main.jsx) باعث شکستن پروژه میشه.
  2. حذف id=”root” → باعث میشه React نتونه کد رو رندر کنه.
  3. تغییر مسیر import‌ها بدون توجه به مسیر واقعی.

7. تمرین‌های پیشنهادی

  1. در پوشه src/ یک پوشه components بساز و یک کامپوننت جدید داخلش قرار بده.
  2. یک تصویر در public/ بگذار و در App.jsx نمایش بده.
  3. استایل کلی بدنه صفحه رو در index.css تغییر بده.

8. جمع‌بندی

  • پروژه React یک ساختار منظم دارد.
  • هر پوشه و فایل نقش خودش رو داره.
  • فهم این ساختار باعث میشه بعداً در کار تیمی یا پروژه‌های بزرگ سردرگم نشی.
  • پوشه src/ قلب کدنویسی ماست.
محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *