بخش 1: معرفی React و فلسفه وجود آن

""

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

وقتی صحبت از ساخت رابط‌های کاربری (UI یا User Interface) مدرن و تعاملی می‌شود، یکی از اولین ابزارهایی که توسعه‌دهندگان به آن فکر می‌کنند، React است.
این کتابخانه توسط شرکت Facebook (که حالا Meta نامیده می‌شود) ساخته شد تا مشکلات بزرگی که در پروژه‌های بزرگ و پیچیده‌ی فرانت‌اند وجود داشت را حل کند.

اهمیت این بخش برای شروع:

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

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

به زبان ساده:

  • React یک کتابخانه جاوااسکریپت است، نه یک فریم‌ورک.
  • هدف اصلی آن این است که ساخت رابط‌های کاربری را ساده، سریع و قابل مدیریت کند.
  • کار اصلی React این است که رابط کاربر را به قسمت‌های کوچک و مستقل (کامپوننت‌ها) تقسیم کند.

چرا کلمه “کتابخانه”؟

  • یک فریم‌ورک معمولاً همه‌چیز را برای شما مدیریت می‌کند (مثلاً Angular).
  • اما React فقط بخشی از کار (UI) را به شکل بهینه انجام می‌دهد و بقیه‌ی انتخاب‌ها را به شما می‌سپارد.

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

برای درک فلسفه React، باید مشکلات قبل از پیدایش آن را بشناسیم:

مشکل 1: DOM کند و پیچیده

  • مرورگر یک ساختار به نام DOM (Document Object Model) دارد که HTML را نمایش می‌دهد.
  • تغییر در DOM به صورت سنتی خیلی کند بود، به‌خصوص وقتی بخش زیادی از صفحه باید به‌روزرسانی می‌شد.
  • Framework یا کدهای دستی مجبور بودند این تغییرات را دقیق انجام دهند و این کار پرهزینه بود.

مشکل 2: مدیریت پیچیدگی رابط کاربری

قبل از React، وقتی برنامه‌ها بزرگ می‌شدند:

  • مدیریت تغییرات UI خیلی سخت می‌شد.
  • مجبور بودیم دستورات زیادی برای تغییر یا نمایش عناصر جدید بنویسیم.
  • کدها به‌هم‌ریخته و غیرقابل نگهداری می‌شدند.

راه‌حل React:

  1. استفاده از Virtual DOM برای بهبود سرعت.
  2. استفاده از کامپوننت‌ها برای تقسیم رابط کاربری به بخش‌های مستقل.
  3. Declarative Programming: به‌جای گفتن چطور کاری انجام شود فقط می‌گوییم چه چیزی باید باشد.

4. کد و مثال ساده

فرض کنید بدون React یک دکمه داریم که وقتی روی آن کلیک شد متن نمایش داده شود:

روش سنتی (جاوااسکریپت خالص):

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>مثال بدون React</title>
</head>
<body>
    <button id="btn">کلیک کن</button>
    <p id="text"></p>

    <script>
        const btn = document.getElementById('btn');
        const text = document.getElementById('text');

        btn.addEventListener('click', () => {
            text.textContent = 'سلام دنیا!';
        });
    </script>
</body>
</html>

مشکل این روش:

  • باید مستقیم به DOM دسترسی بگیریم.
  • برای هر تغییر جدید مجبوریم کد اضافه بنویسیم.
  • کدها سریع شلوغ می‌شوند.

روش با React (نسخه ساده):

import { useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

  return (
    <div>
      <button onClick={() => setMessage('سلام دنیا!')}>کلیک کن</button>
      <p>{message}</p>
    </div>
  );
}

export default App;

5. تحلیل کد React

  • useState: حالتی (state) برای ذخیره متن.
  • onClick: رویداد کلیک دکمه.
  • {message}: رندر داده‌ها داخل JSX.
  • مزیت: ما فقط گفتیم “وقتی کلیک شد، متن این باشد” و React خودش DOM را به‌روزرسانی می‌کند.

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

  1. فکر کردن اینکه React یک فریم‌ورک کامل مثل Angular است.
  2. تلاش برای دستکاری مستقیم DOM (مثلاً استفاده از document.getElementById داخل React).
  3. ندانستن اینکه React فقط لایه UI را پوشش می‌دهد.
  4. عدم درک مفهوم Declarative و نوشتن کد به سبک Imperative.

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

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

8. جمع‌بندی

  • React یک کتابخانه جاوااسکریپت برای ساخت UI است.
  • مشکل اصلی آن حل کردن کندی DOM و پیچیدگی پروژه‌های بزرگ بود.
  • با Virtual DOM، Component، و Declarative Syntax کار را ساده می‌کند.
  • شروع کار با آن راحت است ولی فلسفه آن را باید خوب بفهمید تا در پروژه‌های بزرگ دچار مشکل نشوید.

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *