🔹 Your First React App (اولین اپلیکیشن React شما)

در این درس قراره اولین اپلیکیشن واقعی React خودت رو بسازی و بفهمی دقیقاً چطور React کار می‌کنه.

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

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

npx create-react-app my-first-app

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

cd my-first-app

و برنامه رو اجرا کن:

npm start

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

http://localhost:3000

✅ تبریک! 🎉 اولین پروژه Reactت در حال اجراست.

🔸 مرحله ۲: پاک‌سازی پروژه پیش‌فرض

برای شروع از صفر، فایل‌ها و کدهای اضافی رو حذف کن.

در پوشه‌ی src/ فایل‌های زیر رو نگه دار:

src/
 ├── App.js
 ├── index.js
 └── App.css

و محتوای App.js رو با این کد جایگزین کن:

function App() {
  return (
    <div>
      <h1>My First React App 🚀</h1>
      <p>This is my first React project!</p>
    </div>
  );
}

export default App;

🔸 مرحله ۳: درک نحوه‌ی اجرای React

در فایل 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 />);

📌 این یعنی:

• ()ReactDOM.createRoot ریشه‌ی برنامه رو به عنصر <div id="root"> در index.html وصل می‌کنه.

• <App /> همون کامپوننت اصلی برنامه‌ست که تمام بخش‌ها از اون شروع میشن.

🔸 مرحله ۴: ساخت کامپوننت جدید

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

function Welcome(props) {
  return <h2>Welcome, {props.name}!</h2>;
}

export default Welcome;

حالا در App.js ازش استفاده کن:

import Welcome from "./Welcome";

function App() {
  return (
    <div>
      <h1>My First React App 🚀</h1>
      <Welcome name="Ali" />
      <Welcome name="Sara" />
      <Welcome name="Reza" />
    </div>
  );
}

export default App;

📌 خروجی:

My First React App 🚀
Welcome, Ali!
Welcome, Sara!
Welcome, Reza!

✅ حالا برنامه‌ات شامل چند کامپوننت قابل استفاده مجدده!

🔸 مرحله ۵: افزودن استایل

در فایل App.css بنویس:

body {
  background-color: #f8f9fa;
  font-family: Arial, sans-serif;
}

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

h2 {
  color: #333;
  text-align: center;
}

📌 مرورگر به‌صورت خودکار به‌روزرسانی میشه و استایل‌ها اعمال می‌شن.

🔸 مرحله ۶: افزودن تعامل (state)

در App.js بنویس:

import { useState } from "react";
import Welcome from "./Welcome";

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

  return (
    <div style={{ textAlign: "center" }}>
      <h1>My First React App 🚀</h1>
      <Welcome name="Ali" />
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

export default App;

📌 خروجی:

My First React App 🚀
Welcome, Ali!
You clicked 0 times
[Click Me]

وقتی روی دکمه کلیک می‌کنی، عدد افزایش پیدا می‌کنه! 🎯

🔸 مرحله ۷: ساخت نسخه نهایی برای انتشار

وقتی برنامه‌ت آماده شد، دستور زیر رو اجرا کن:

npm run build

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

✅ خلاصه‌ی درس

✅ نتیجه:
در این درس یاد گرفتی چطور از صفر یک برنامه‌ی React بسازی، با کامپوننت‌ها، state و استایل‌ها کار کنی، و خروجی نهایی رو تولید کنی.