React JSX

20 دقیقه Article

سینتکس JSX: جادوی React ✨

JSX (JavaScript XML) افزونه‌ای برای سینتکس JS است که اجازه می‌دهد HTML را مستقیماً داخل کد جاوااسکریپت بنویسید.

قوانین مهم

باید همیشه یک عنصر پدر (Parent) داشته باشید (یا Fragment).
تمام تگ‌ها باید بسته شوند (حتی <br />).
کلاس CSS با نام className استفاده می‌شود (نه class).

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

فلسفه React: تفکر اعلانی (Declarative) 🧠

بزرگترین تغییر ذهنی هنگام یادگیری React، حرکت از کدنویسی دستوری (Imperative) به اعلانی (Declarative) است. در روش قدیمی (jQuery)، شما می‌گفتید: "برو اون دکمه رو پیدا کن، کلاس فعال رو بهش اضافه کن". در React، شما می‌گویید: "اگر وضعیت فعال است، دکمه باید این شکلی باشد" و React بقیه کارها را انجام می‌دهد.

نکته تخصصی: React فقط یک کتابخانه UI است، نه یک فریم‌ورک کامل مثل Angular. این یعنی شما آزادی عمل بیشتری دارید اما باید خودتان ابزارهایی مثل Router را انتخاب کنید.

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

اصلاح JSX Easy

سوال تمرین

کد زیر خطا دارد چون دو عنصر هم‌سطح برمی‌گرداند. با Fragment اصلاحش کنید.

پاسخ تمرین

return (
  <>
    <h1>Title</h1>
    <p>Text</p>
  </>
);

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo