نصب و پیکربندی React با Create React App (CRA)

Create React App (CRA) یکی از ساده‌ترین راه‌ها برای راه‌اندازی یک پروژه React بدون نیاز به تنظیمات پیچیده Webpack و Babel است. این ابزار به شما کمک می‌کند تا به‌سرعت یک برنامه React راه‌اندازی کرده و شروع به توسعه کنید.

 

1. پیش‌نیازها

قبل از نصب Create React App، باید موارد زیر روی سیستم شما نصب باشد:

✅ Node.js (نسخه ۱۸ به بالا پیشنهاد می‌شود)
✅ npm (همراه با Node.js نصب می‌شود) یا yarn (اختیاری)

برای بررسی نسخه‌ی نصب‌شده‌ی Node.js و npm، از دستورات زیر استفاده کنید:

node -v
npm -v

اگر نصب نیست، می‌توانید از وب‌سایت رسمی Node.js نسخه‌ی جدید را دریافت کنید.

 

2. ایجاد یک پروژه React با CRA

برای ایجاد یک پروژه جدید، دستور زیر را در ترمینال/Command Prompt اجرا کنید:

npx create-react-app my-app

🔹 npx ابزار مدیریت بسته‌های npm است که به شما امکان می‌دهد بدون نصب جداگانه create-react-app، آن را اجرا کنید.
🔹 my-app نام پوشه‌ای است که پروژه شما در آن ساخته می‌شود (می‌توانید نام دلخواه بگذارید).

⏳ این فرآیند چند دقیقه طول می‌کشد و پس از اتمام، پروژه آماده است.

اگر از yarn استفاده می‌کنید:

yarn create react-app my-app

 

3. ورود به پوشه پروژه و اجرای برنامه

پس از ایجاد پروژه، وارد پوشه‌ی آن شوید:

cd my-app

سپس سرور توسعه را اجرا کنید:

npm start

یا اگر از yarn استفاده می‌کنید:

yarn start

📌 نتیجه: مرورگر به‌طور خودکار باز شده و برنامه‌ی React شما در http://localhost:3000/ نمایش داده می‌شود.

 

4. بررسی ساختار پروژه

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

my-app/
├── node_modules/   # پوشه‌ی مربوط به وابستگی‌های پروژه
├── public/         # فایل‌های عمومی مانند index.html
├── src/            # کدهای اصلی React
│   ├── App.js      # کامپوننت اصلی
│   ├── index.js    # فایل اصلی برای رندر برنامه
│   ├── App.css     # استایل‌های پیش‌فرض
│   ├── ...
├── .gitignore      # لیست فایل‌هایی که در Git اضافه نمی‌شوند
├── package.json    # اطلاعات و وابستگی‌های پروژه
├── README.md       # مستندات اولیه پروژه

 

5. سفارشی‌سازی اولیه پروژه

✅ حذف فایل‌های غیرضروری
برای ساده‌سازی پروژه، می‌توانید برخی از فایل‌های پیش‌فرض را حذف کنید.

1. فایل‌های غیرضروری را از src/ حذف کنید:
   • App.css
   • App.test.js
   • logo.svg
   • reportWebVitals.js
   • setupTests.js
2. فایل App.js را تغییر دهید:

🔹 قبل از تغییر (App.js پیش‌فرض CRA):

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Welcome to React</p>
      </header>
    </div>
  );
}

export default App;

🔹 بعد از تغییر (App.js ساده‌شده):

function App() {
  return (
    <div>
      <h1>سلام، این یک پروژه React است!</h1>
    </div>
  );
}

export default App;

✅ اجرای مجدد پروژه
پس از تغییرات، دستور npm start را اجرا کنید تا تغییرات در مرورگر نمایش داده شود.

 

6. نصب وابستگی‌های رایج

برای اضافه کردن ابزارهای پرکاربرد به پروژه می‌توانید از این دستورات استفاده کنید:

📌 نصب React Router (برای مدیریت مسیرها)

npm install react-router-dom

📌 نصب Axios (برای کار با APIها)

npm install axios

📌 نصب Tailwind CSS (برای استایل‌دهی مدرن)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

7. نتیجه‌گیری

✅ Create React App به شما امکان می‌دهد بدون نیاز به پیکربندی دستی، یک پروژه React را راه‌اندازی کنید.
✅ پوشه src/ محل اصلی توسعه‌ی برنامه است.
✅ می‌توانید وابستگی‌های مختلفی را بر اساس نیاز پروژه نصب کنید.