بخش 2: تاریخچه مختصر React

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

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

---

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

به زبان ساده:

• React در ابتدا پروژه‌ای داخلی در شرکت Facebook بود.
• کسی که ایده اولیه را مطرح کرد Jordan Walke (مهندس نرم‌افزار فیسبوک) بود.
• ایده این بود که رابط کاربری بتواند به شکلی بسیار سریع، ماژولار و خوانا به‌روزرسانی شود.
• بعد از موفقیت داخلی، فیسبوک تصمیم گرفت آن را Open Source کند.

---

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

سال 2011 – ایده اولیه

• Jordan Walke روی پروژه‌ای به نام FaxJS کار می‌کرد.
• FaxJS یک رابط برنامه‌نویسی برای ساخت UI بود که later به React تبدیل شد.
• اولین بار در بخش News Feed فیسبوک استفاده شد.

سال 2012 – استفاده عمومی داخلی

• در پروژه Messenger و Instagram داخل شرکت.
• چالش اصلی در فیسبوک: میلیون‌ها کاربر + آپدیت‌های سریع دیتا + پیچیدگی زیاد UI.

سال 2013 – انتشار عمومی

• در JSConf US فیسبوک React را به عنوان یک کتابخانه متن‌باز معرفی کرد.
• جامعه توسعه‌دهندگان در ابتدا شکاک بودند، چون:

1. استفاده از JSX (ترکیب HTML و JavaScript) عجیب بود.
2. ایده Virtual DOM تازه و ناشناخته بود.

سال 2014 – ظهور React Native

• فیسبوک React را به دنیای موبایل آورد.
• با React Native می‌توانستید اپلیکیشن موبایل واقعی (Native) بسازید که کدش تقریباً شبیه وب بود.

سال 2015 – ایجاد اکوسیستم

• ابزارهایی مثل Flux برای مدیریت داده معرفی شدند.
• بعداً Redux و Context API آمدند.

سال 2016 تا 2018 – پیشرفت و بهینه‌سازی

• معرفی Fiber Architecture در React 16 برای بهبود کارایی.
• اضافه شدن Error Boundaries جهت مدیریت بهتر خطا.

سال 2019 – تغییرات ساختاری

• معرفی Hooks در React 16.8 که انقلابی در نحوه نوشتن کامپوننت‌ها ایجاد کرد.
• جایگزینی تدریجی کلاس‌ها با فانکشن‌ها + هوک‌ها.

سال 2022 – React 18

• پشتیبانی از Concurrent Rendering.
• ویژگی‌های جدید مثل:
• useId
• حالت‌های خودکار batching
• قابلیت Suspense پیشرفته برای داده‌ها

---

4. کد و مثال ارتباط با تاریخ

کد یک کامپوننت قبل از معرفی Hooks (سال 2017 – استفاده از کلاس):

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>شمارش: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          افزایش
        </button>
      </div>
    );
  }
}

export default App;

---

همان کد بعد از معرفی Hooks (بعد از 2019):

import { useState } from 'react';

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

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

export default App;

---

5. تحلیل این تغییرات

• قبل از Hooks: نیاز به کلاس‌ها، constructor و مدیریت پیچیده‌تر state.
• بعد از Hooks: نوشتن ساده‌تر، عملکرد بهتر، درک راحت‌تر برای مبتدی‌ها.
• از نگاه تاریخی، همین تغییر یکی از دلایل انفجار محبوبیت React بود.

---

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

1. فکر کردن به اینکه React همیشه مثل الان بوده.
2. ندانستن اینکه چرا Virtual DOM مهم است.
3. تصور اینکه Hooks فقط یک روش جدید نوشتن است، در حالی که فلسفه متفاوتی دارد.
4. عدم آگاهی از اینکه React Native بخشی از خانواده React است و بر همان ایده‌ها بنا شده.

---

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

1. دو نسخه از یک کامپوننت ساده را بسازید: یکی با کلاس‌ها و یکی با هوک‌ها.
2. یک جدول زمانی از سال 2011 تا 2025 درباره پیشرفت‌های React رسم کنید.
3. در وبلاگ React، تغییرات نسخه‌های بزرگ را بخوانید و خلاصه کنید.

---

8. جمع‌بندی

• React ابتدا یک پروژه داخلی فیسبوک برای حل مشکل پیچیدگی UI بود.
• در سال 2013 متن‌باز شد و ویژگی Virtual DOM باعث شهرتش شد.
• React Native باعث گسترش آن به موبایل شد.
• معرفی Hooks در 2019 نقطه عطف مهمی بود.
• نسخه 18 با قابلیت‌های پیشرفته‌تر وارد دنیای Concurrent Rendering شد.