🔹 React Introduction (مقدمه‌ای بر React)

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

🔸 React چیست؟

React به توسعه‌دهنده اجازه میده تا رابط‌های کاربری پیچیده رو از کامپوننت‌های کوچک و قابل‌استفاده‌مجدد (Reusable Components) بسازه.
به زبان ساده، در React هر بخش از صفحه (مثل دکمه، فرم، کارت، منو و...) خودش یک کامپوننت مستقل است.

🔸 ویژگی‌های مهم React

1. ✅ Component-Based

   • همه‌چیز از تکه‌های کوچک‌تر به نام کامپوننت ساخته میشه.

   • باعث نظم، خوانایی و استفاده‌ی مجدد از کد میشه.

2. ⚡ Virtual DOM

   • React از DOM مجازی برای بهبود سرعت استفاده می‌کنه.

   • فقط بخش‌هایی از صفحه که تغییر کردن دوباره رندر می‌شن.

3. 🔁 One-Way Data Binding

   • داده فقط در یک جهت (از والد به فرزند) جریان داره.

   • کنترل داده‌ها و دیباگ کردن راحت‌تر میشه.

4. 🧩 Declarative Syntax

   • تو فقط می‌گی “چی می‌خوام نمایش داده بشه”؛
     React خودش نحوه‌ی به‌روزرسانی صفحه رو مدیریت می‌کنه.

5. 🌍 Cross-Platform

   • با ابزارهایی مثل React Native می‌تونی با همین سینتکس برای موبایل هم اپ بسازی.

🔸 چرا React محبوب است؟

🔸 نمونه کد ساده React

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

📌 توضیح:

• Hello یک کامپوننت تابعی (Functional Component) است.

• خروجی JSX است (ترکیب HTML و JavaScript).

در فایل App.js می‌تونی بنویسی:

import Hello from "./Hello";

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

📌 خروجی مرورگر:

Hello React!

🔸 JSX چیست؟

JSX (JavaScript XML) ترکیبی از HTML و JS است که در React استفاده می‌شود.
به‌جای کدهای طولانی DOM، می‌تونی مستقیم HTML بنویسی:

const element = <h2>Welcome to React!</h2>;

📌 در پشت صحنه، JSX تبدیل به دستورهای جاوااسکریپتی مثل ()React.createElement میشه.

🔸 React چطور کار می‌کند؟

1. داده‌ها در state یا props ذخیره می‌شن.

2. React با استفاده از Virtual DOM تغییرات رو محاسبه می‌کنه.

3. فقط بخش‌هایی از صفحه که تغییر کردن، در DOM واقعی به‌روزرسانی می‌شن.

✅ نتیجه: سرعت بالا، عملکرد بهتر، و تجربه کاربری نرم‌تر.

🔸 پیش‌نیازهای یادگیری React

• آشنایی با HTML, CSS, JavaScript (ES6)

• مفاهیم پایه‌ای مثل:

  • Arrow Functions

  • Array Methods (map, filter)

  • Destructuring

  • Modules و Import/Export

🔸 نصب و شروع پروژه

برای شروع سریع با React:

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

سپس در مرورگر باز کن:

http://localhost:3000

🔸 مثال واقعی‌تر

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Ali" />
    </div>
  );
}

📌 خروجی:

Hello, Sara!
Hello, Ali!

✅ خلاصه

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