🔹 React Getting Started (شروع کار با React)

در این درس یاد می‌گیری چطور اولین پروژه React رو راه‌اندازی کنی، ساختار فایل‌ها رو بشناسی و یک کامپوننت ساده بسازی.

🔸 پیش‌نیازها

قبل از شروع باید ابزارهای زیر نصب باشن 👇

1. Node.js (بهتره نسخه LTS باشه)

2. npm یا yarn برای مدیریت پکیج‌ها

3. یک ویرایشگر مثل VS Code

برای بررسی نصب:

node -v
npm -v

🔸 ایجاد پروژه جدید با Create React App

ساده‌ترین روش ساخت پروژه React استفاده از ابزار رسمی Create React App هست.

در ترمینال بنویس:

npx create-react-app my-app

سپس وارد پروژه شو:

cd my-app
npm start

📌 مرورگر به‌صورت خودکار در آدرس زیر باز میشه:

http://localhost:3000

✅ حالا اولین پروژه React شما آماده است!

🔸 ساختار پوشه‌ها

وقتی پروژه ساخته میشه، ساختار پیش‌فرض به این شکله 👇

my-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── index.js
│   ├── App.css
│   └── logo.svg
├── package.json
└── README.md

🔹 توضیح فایل‌ها:

• public/index.html → قالب اصلی HTML

• src/index.js → نقطه شروع برنامه React

• src/App.js → کامپوننت اصلی (Root Component)

• App.css → استایل‌ها

• package.json → تنظیمات و وابستگی‌ها

🔸 اولین ویرایش در React

فایل App.js رو باز کن و کد زیر رو بنویس:

function App() {
  return (
    <div>
      <h1>Hello React!</h1>
      <p>Welcome to my first React app.</p>
    </div>
  );
}

export default App;

📌 حالا صفحه‌ی مرورگر به‌صورت خودکار به‌روزرسانی میشه و خروجی زیر رو می‌بینی:

Hello React!
Welcome to my first React app.

🔸 ایجاد یک کامپوننت جدید

در پوشه‌ی src/ یک فایل جدید به نام Message.js بساز و بنویس:

function Message() {
  return <h2>This is a new component!</h2>;
}

export default Message;

حالا در App.js ایمپورتش کن:

import Message from "./Message";

function App() {
  return (
    <div>
      <h1>Hello React!</h1>
      <Message />
    </div>
  );
}

export default App;

📌 خروجی:

Hello React!
This is a new component!

🔸 اضافه کردن استایل

می‌تونی از فایل CSS یا استایل درون‌خطی استفاده کنی.

function App() {
  return (
    <div style={{ textAlign: "center", color: "coral" }}>
      <h1>Hello React!</h1>
      <p>Styled with inline CSS</p>
    </div>
  );
}

یا از فایل CSS جداگانه (App.css):

h1 {
  color: coral;
  text-align: center;
}

🔸 حذف فایل‌های اضافی

برای تمیزتر شدن پروژه، می‌تونی فایل‌های غیرضروری مثل logo.svg یا کدهای پیش‌فرض در App.js رو پاک کنی.

🔸 اجرای مجدد برنامه

برای اجرای دوباره پروژه در هر زمان:

npm start

و برای خروج از سرور:

Ctrl + C

🔸 ایجاد Build نهایی برای انتشار

وقتی پروژه‌ت آماده شد، برای ساخت نسخه‌ی نهایی:

npm run build

📦 پوشه‌ی build/ ساخته میشه که نسخه‌ی بهینه‌شده‌ی اپ رو شامل میشه (مناسب برای سرور یا هاست).

✅ خلاصه

✅ نتیجه:
در این مرحله یاد گرفتی چطور یک پروژه React ایجاد کنی، فایل‌ها رو بشناسی، کامپوننت بنویسی و برنامه رو اجرا یا منتشر کنی.