بخش 8: ساخت اولین پروژه React

محمد
اموزش React

۱. مقدمه: چرا این مرحله مهم‌ترین بخش شروع کار با React است؟

اگر بخش‌های قبل را به عنوان آماده‌سازی ذهنی و ابزارها در نظر بگیریم، این بخش نقطه‌ای است که:

شما از مرحله‌ی “یادگیری تئوری” وارد “یادگیری عملی” می‌شوید.
اولین کد React شما نوشته می‌شود.
محیطی ایجاد می‌کنید که می‌توانید بدون دغدغه در آن آزمایش کنید.
درک می‌کنید که یک پروژه React چه مسیری را از کد شما تا مرورگر طی می‌کند.

بدون این مرحله، همه‌ی دانسته‌های ابزارها، Node.js و npm/yarn هنوز به صورت بالقوه باقی مانده‌اند و در عمل نمی‌دانید چطور باید پروژه را پیاده‌سازی کنید.

این بخش تمرکز کامل روی ایجاد اولین پروژه از صفر دارد.

۲. تعریف مفهومی “ساخت پروژه React”

وقتی می‌گوییم “ساخت پروژه” در React، منظور ایجاد یک پوشه یا ساختار فایل برای یک برنامه تحت وب است که:

تمام ابزارهای مورد نیاز (React، ReactDOM، ابزار ساخت و Bundling) را دارد.
فایل‌های ورودی و خروجی مشخص هستند.
یک فایل HTML به عنوان ریشه وجود دارد.
کدهای React در پوشه مشخصی (معمولاً src/) قرار دارند.
برنامه روی یک سرویس توسعه محلی (Development Server) اجرا شود و هر تغییر، فوراً در مرورگر نمایش داده شود (Hot Module Replacement یا HMR).

ساخت پروژه React به معنای نوشتن HTML/CSS/JS خام نیست، بلکه ایجاد یک سیستم ساخت (Build System) است که بتواند:

JSX (کد React) را به جاوااسکریپت قابل فهم مرورگر تبدیل کند.
از آخرین استانداردهای ECMAScript استفاده کند.
برنامه را بعداً Build و برای انتشار بهینه کند.

۳. ابزارهای ساخت پروژه: Vite و Create React App

قبل از شروع عملی، باید انتخاب کنیم از چه ابزاری استفاده کنیم:

Create React App (CRA) → کلاسیک، رسمی، مناسب برای شروع سنتی ولی کندتر.
Vite → مدرن، سریع، بهینه.

چرا Vite محبوب‌تر شده؟

سرعت بالا: استارت اولیه و اجرای مجدد پروژه بسیار سریع‌تر از CRA است، چون Vite از ESBuild (زبان Go) استفاده می‌کند که چندین برابر سریع‌تر از Webpack است.
حجم خروجی کمتر: کد تولیدی در مرحله Build کوچک‌تر و بهینه‌تر است.
پیکربندی ساده‌تر: امکان سفارشی‌سازی راحت‌تر تنظیمات.
پشتیبانی از Hot Module Replacement سریع‌تر: بدون Refresh کل صفحه.

با این‌حال، CRA هنوز برای کسانی که می‌خواهند دقیقاً همان چیزی را پیاده کنند که مستندات رسمی React آموزش داده‌اند، انتخاب خوبی است.

۴. فرآیند کلی ساخت اولین پروژه در Vite

قبل از نوشتن حتی یک خط کد React، لازم است قدم‌به‌قدم کارهای زیر را انجام دهیم:

ایجاد پروژه پایه با استفاده از دستور ساخت Vite.
انتخاب فریم‌ورک و نوع پروژه (React + JS یا React + TS).
ورود به پوشه پروژه.
نصب وابستگی‌ها با npm یا yarn.
اجرای سرور توسعه.
باز کردن مرورگر و مشاهده خروجی اولیه.
تغییر کد پیش‌فرض و مشاهده نتیجه.
درک ساختار پوشه‌ها و فایل‌ها برای توسعه‌های بعدی.

۵. مراحل ساخت اولین پروژه با Vite (مرحله به مرحله، با توضیح کامل)

مرحله ۱: اجرای دستور ایجاد پروژه

در ترمینال (Command Prompt, PowerShell, یا Terminal در مک/لینوکس) بنویسید:

npm create vite@latest my-first-react-app

npm create → مشابه npx است و دستور ساخت یک پروژه جدید را اجرا می‌کند.
vite@latest → اطمینان می‌دهد آخرین نسخه Vite استفاده شود.
my-first-react-app → نام پوشه پروژه.

مرحله ۲: انتخاب نوع پروژه

بعد از اجرای دستور بالا، Vite چند سؤال می‌پرسد:

✔ Project name: … my-first-react-app
✔ Select a framework: › React
✔ Select a variant: › JavaScript

تحلیل پاسخ‌ها:

Project name → نام پوشه پروژه شما (می‌توانید از چیزی غیر از “my-first-react-app” هم استفاده کنید).
Select a framework → گزینه “React” را انتخاب می‌کنیم چون می‌خواهیم یک پروژه React بسازیم.
Select a variant →
JavaScript → اگر تازه‌کارید یا نمی‌خواهید TypeScript استفاده کنید.
TypeScript → اگر با TypeScript آشنایی دارید.

مرحله ۳: ورود به پوشه پروژه

cd my-first-react-app

مرحله ۴: نصب وابستگی‌ها

npm install

این دستور:

محتویات package.json را می‌خواند.
تمام کتابخانه‌ها را از npm دانلود می‌کند.
آن‌ها را در پوشه node_modules/ ذخیره می‌کند.

مرحله ۵: اجرای پروژه

npm run dev

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

VITE v4.4.9  ready in 350 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

در اینجا:

Local → آدرسی که در مرورگر باز می‌کنید تا پروژه را ببینید.
پورت پیش‌فرض Vite: 5173.

مرحله ۶: مشاهده پروژه در مرورگر

مرورگر خود را باز کنید.
آدرس http://localhost:5173/ را وارد کنید.
نتیجه: یک صفحه ساده با لوگوی React و متن خوش‌آمدگویی از Vite.

۶. پشت‌صحنه اجرای این پروژه

وقتی npm run dev را اجرا می‌کنیم:

Vite یک سرور توسعه (Dev Server) را با استفاده از Node.js ایجاد می‌کند.
فایل index.html را در مرورگر لود می‌کند.
کد JSX در src/ توسط Babel و ESBuild به جاوااسکریپت تبدیل می‌شود.
Hot Module Replacement فعال می‌شود تا هر تغییر فایل بدون بارگذاری مجدد صفحه اعمال شود.

۷. ساخت اولین تغییر واقعی در React

فایل `src/App.jsx`

نسخه پیش‌فرض (توسط Vite ایجاد شده):

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
    </>
  )
}

export default App

تغییر به نسخه ساده‌تر

function App() {
  return (
    <div style={{ textAlign: 'center', padding: '30px' }}>
      <h1>سلام React!</h1>
      <p>این اولین پروژه من با Vite و React است.</p>
    </div>
  );
}

export default App;

تحلیل تغییرات:

تمام importهای اضافی حذف شدند (لوگوها، useState).
از inline style برای کنترل فاصله و مرکز‌چین کردن استفاده کرده‌ایم.
متن فارسی اضافه کردیم.

۸. ساختار پوشه‌ها و دلیل وجود آن‌ها

ساختاری که Vite ایجاد کرده:

my-first-react-app/
├── node_modules/          # تمام کتابخانه‌ها و ابزارهای نصب‌شده
├── public/                # فایل‌های استاتیک (تصاویر و...)
├── src/                   # محل اصلی کدهای ما
│   ├── App.css             # استایل کامپوننت App
│   ├── App.jsx             # کامپوننت اصلی App
│   ├── index.css           # استایل کلی پروژه
│   └── main.jsx            # نقطه ورودی برنامه
├── index.html              # فایل HTML پایه
├── package.json            # لیست وابستگی‌ها و تنظیمات
├── vite.config.js          # تنظیمات Vite
└── README.md               # توضیحات پروژه

۹. اشتباهات رایج مبتدیان

۱. فراموش کردن نصب وابستگی‌ها:

بعد از دانلود یک پروژه باید همیشه npm install یا yarn install بزنید.
۲. تغییر نام یا حذف node_modules به صورت تصادفی:
این پوشه مهم است ولی اگر پاک شد، با npm install بازسازی می‌شود.
۳. حذف div#root از index.html:
کل React روی این عنصر نصب می‌شود.
۴. ادغام npm و yarn در یک پروژه:
باعث تعارض نسخه‌ها می‌شود.

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

متن و رنگ‌های صفحه را تغییر دهید.
یک دکمه اضافه کنید که با کلیک روی آن متن تغییر کند (با useState).
یک تصویر در public/ اضافه کنید و آن را در App.jsx نمایش دهید.
دو کامپوننت بسازید و در App.jsx استفاده کنید.

۱۱. جمع‌بندی

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

محمد وب‌سایت