بخش 3: ویژگی‌های اصلی React (Declarative, Component-Based, Learn Once Write Anywhere)

1. مقدمه کوتاه

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

1. Declarative (تعریف‌گرانه)
2. Component-Based (مبتنی بر کامپوننت‌ها)
3. Learn Once, Write Anywhere (یکبار بیاموز، همه‌جا بنویس)

درک این سه اصل مهمه چون تقریباً همهٔ کدهایی که در React می‌نویسیم، به نحوی به این مفاهیم برمی‌گرده.

---

2. تعریف و توضیح مفهومی

1. Declarative

برنامه‌نویسی توصیفی یا Declarative یعنی به جای اینکه به برنامه بگوییم چطور کاری را انجام بده، فقط می‌گوییم چه چیزی می‌خواهیم.

مثال:

• در روش سنتی (Imperative) می‌گوییم:

1. برو سراغ این دکمه
2. وقتی کلیک شد، متن این قسمت رو تغییر بده
3. رنگش رو عوض کن

• ولی در روش Declarative می‌گوییم:

وقتی state برابر X شد، این UI را نمایش بده

React با استفاده از Declarative Programming، بیشتر کارها را خودش پشت‌صحنه انجام می‌دهد.

---

2. Component-Based

ایدهٔ Component-Based یعنی رابط کاربری را به تکه‌های کوچک و مستقل تقسیم کنیم که هر کدام:

• منطق و UI خاص خودش را داشته باشه
• قابل استفادهٔ مجدد باشد (Reusable)
• مستقل از بقیه کار کند

مثلاً در یک سایت فروشگاهی، دکمهٔ خرید، کارت محصول، و هدر سایت هرکدام یک کامپوننت جدا هستند.

---

3. Learn Once, Write Anywhere

این شعار React یعنی اگر یکبار مفاهیم React را یاد گرفتید:

• می‌توانید هم برای وب با ReactJS کد بنویسید
• هم برای موبایل با React Native
• حتی برای اپلیکیشن دسکتاپ با Electron + React

یعنی دانش شما محدود به یک پلتفرم نیست.

---

3. جزئیات فنی و نکات عمیق‌تر

Declarative در سطح فنی

React از Virtual DOM استفاده می‌کند تا برای شما مسیر تغییرات لازم را پیدا کند:

1. شما تغییر در state ایجاد می‌کنید.
2. React یک Virtual DOM جدید می‌سازد.
3. آن را با Virtual DOM قبلی مقایسه می‌کند (Diffing algorithm).
4. فقط قسمت‌های تغییر کرده را در DOM واقعی اعمال می‌کند.

---

Component-Based در سطح فنی

• هر کامپوننت یک تابع (یا کلاس قدیمی) است که ورودی‌اش حالا props/state است و خروجی‌اش JSX.
• ارتباط بین کامپوننت‌ها از طریق props انجام می‌شود.
• با ترکیب کامپوننت‌ها، یک درخت (Component Tree) ساخته می‌شود.

---

Learn Once, Write Anywhere در عمل

• هستهٔ منطقی React (Concepts, Hooks, State, Props) در همه‌جا یکسان است.
• تفاوت فقط در renderer است:
• ReactDOM برای وب
• React Native برای موبایل
• ReactThreeFiber برای گرافیک سه‌بعدی
• Ink برای رابط‌های خط فرمان (CLI)

---

4. مثال‌های متعدد

مثال 1: Declarative

روش Imperative (جاوااسکریپت سنتی):

<div id="app"></div>
<script>
  const app = document.getElementById('app');
  let count = 0;

  function render() {
    app.innerHTML = `
      <p>Count: ${count}</p>
      <button id="btn">افزایش</button>
    `;
    document.getElementById('btn').addEventListener('click', () => {
      count++;
      render();
    });
  }

  render();
</script>

روش Declarative با React:

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
}

export default Counter;

---

مثال 2: Component-Based

فرض کنیم یک کارت محصول داریم:

function ProductCard({ name, price }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{price} تومان</p>
      <button>خرید</button>
    </div>
  );
}

function ProductList() {
  return (
    <div>
      <ProductCard name="موبایل" price={10000000} />
      <ProductCard name="لپ‌تاپ" price={30000000} />
    </div>
  );
}

هر کارت (ProductCard) یک کامپوننت مستقل است که در هر جای برنامه می‌توانیم از آن استفاده کنیم.

---

مثال 3: Learn Once, Write Anywhere

همین Counter را که برای وب ساختیم، می‌توان در موبایل هم استفاده کرد:

// React Native
import { useState } from 'react';
import { View, Text, Button } from 'react-native';

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

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="افزایش" onPress={() => setCount(count + 1)} />
    </View>
  );
}

---

5. تحلیل و بررسی کدها

• Declarative: شما منطق را تعریف می‌کنید، خروجی UI به‌صورت خودکار از state گرفته می‌شود.
• Component-Based: کدتان کوچک، تست‌پذیر و قابل‌استفاده مجدد می‌شود.
• Learn Once, Write Anywhere: یادگیری شما روی یک پروژه محدود نمی‌ماند.

---

6. اشتباهات رایج مبتدیان

1. تلاش برای نوشتن کد به روش Imperative داخل React.
2. ساختن کامپوننت‌های خیلی بزرگ به جای تقسیم به واحدهای کوچک.
3. نادیده گرفتن قابلیت استفاده مجدد از کامپوننت‌ها.
4. تصور اینکه “Write Anywhere” یعنی کپی‌پیست مستقیم کد وب در موبایل بدون تغییر.

---

7. تمرین‌های پیشنهادی

1. یک Counter به دو روش Imperative و Declarative بسازید و مقایسه کنید.
2. یک لیست کامپوننت «کارت محصول» بسازید که ۵ محصول مختلف را نمایش دهد.
3. همین کارت را در React Native بسازید تا مفهوم “Write Anywhere” را درک کنید.

---

8. جمع‌بندی

• React به خاطر Declarative بودن، از ما کد کمتر و خواناتری می‌خواهد.
• Component-Based باعث می‌شود کد سازمان‌دهی شده، ساخت‌یافته و قابل‌استفاده مجدد باشد.
• با رویکرد Learn Once, Write Anywhere مهارت‌های React شما در وب، موبایل و حتی دسکتاپ کاربرد دارد.
• این سه ویژگی در تمام پروژه‌هایی که با React ساخته می‌شوند، حضور پررنگی دارند.