🔹 React Tutorial (آموزش مقدماتی React)

React یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت برای ساخت رابط کاربری (UI) است. این کتابخانه توسط Facebook (Meta) ساخته شده و برای ساخت برنامه‌های تک‌صفحه‌ای (SPA) استفاده می‌شود.

🔸 React چیست؟

React به شما کمک می‌کند رابط‌های کاربری را به‌صورت کامپوننتی (Component-Based) بسازید.
هر قسمت از صفحه (دکمه، کارت، فرم و...) یک کامپوننت جداست که می‌تواند کد HTML، CSS و Logic مخصوص خودش را داشته باشد.

🔸 نصب و راه‌اندازی

برای شروع باید Node.js نصب باشه.
سپس با دستور زیر یک پروژه React بساز:

npx create-react-app my-app
cd my-app
npm start

📌 با اجرای دستور بالا، یک پروژه جدید ساخته میشه و در مرورگر روی آدرس http://localhost:3000 باز میشه.

🔸 ساخت اولین کامپوننت

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

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

export default Hello;

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

import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

📌 خروجی:

Hello React!

🔸 Props (ارسال داده به کامپوننت)

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

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

function App() {
  return <Hello name="Sara" />;
}

📌 خروجی:

Hello, Sara!

🔸 State (مدیریت وضعیت داخلی)

کامپوننت‌ها می‌تونن وضعیت خودشون رو داشته باشن.
برای اینکار از Hook به نام useState استفاده می‌کنیم:

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

📌 هر بار کلیک روی دکمه، مقدار count افزایش پیدا می‌کنه.

🔸 useEffect (اجرای کد در زمان خاص)

برای انجام کارهایی مثل درخواست API یا تغییر عنوان صفحه از useEffect استفاده می‌کنیم:

import { useEffect, useState } from "react";

function Message() {
  const [text, setText] = useState("Loading...");

  useEffect(() => {
    setTimeout(() => {
      setText("Welcome to React!");
    }, 2000);
  }, []);

  return <h3>{text}</h3>;
}

📌 متن بعد از ۲ ثانیه تغییر می‌کنه.

🔸 JSX چیست؟

JSX ترکیبی از HTML و JavaScript است که React آن را به ()React.createElement تبدیل می‌کند.

const element = <h1>Hello JSX!</h1>;

✅ داخل JSX می‌تونید از متغیرها، توابع و شرط‌ها استفاده کنید:

const user = "Ali";
return <h2>{user ? `Hello ${user}` : "Guest"}</h2>;

🔸 رویدادها (Events)

رویدادها در React مشابه HTML هستن ولی با camelCase نوشته می‌شن:

function Button() {
  function handleClick() {
    alert("Clicked!");
  }

  return <button onClick={handleClick}>Click Me</button>;
}

🔸 استایل‌دهی در React

1. استایل درون‌خطی:

   <h2 style={{ color: "coral", fontSize: "24px" }}>Hello</h2>
   

2. کلاس‌های CSS:

   <h2 className="title">Hello</h2>
   

3. استفاده از Tailwind CSS یا CSS Module برای پروژه‌های حرفه‌ای‌تر.

🔸 مدیریت داده در پروژه‌های بزرگ‌تر

برای پروژه‌های بزرگ، معمولاً از یکی از این ابزارها استفاده میشه:

• Context API (درون خود React)

• Redux Toolkit

• Zustand / Jotai / Recoil

🔸 ساخت لیست

function List() {
  const items = ["HTML", "CSS", "JavaScript"];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

✅ نکته مهم

• React فقط برای UI است، نه برای کار با دیتابیس یا سرور.

• برای ارتباط با API از fetch یا کتابخانه‌هایی مثل axios استفاده میشه.

• برای روتینگ صفحات از react-router-dom استفاده می‌کنیم.

🔸 جمع‌بندی

✅ خلاصه:
React یعنی ساخت رابط کاربری با تکه‌های کوچک و قابل‌مدیریت به نام کامپوننت. با props داده منتقل می‌کنی، با state وضعیت کنترل می‌کنی، و با hooks منطق هوشمند می‌سازی.