آشنایی با JSX و چرایی استفاده از آن

مقدمه

به فصل سوم خوش آمدید! در درس قبل، ما اولین کامپوننت React خود را ساختیم و دیدیم که یک تابع جاوااسکریپت می‌تواند چیزی شبیه به HTML را برگرداند. این سینتکس که به ما اجازه می‌دهد ساختار UI را در کنار منطق جاوااسکریپت بنویسیم، JSX نام دارد.

JSX مخفف JavaScript XML است و یک افزونه سینتکسی برای جاوااسکریپت محسوب می‌شود. این یک زبان تمپلیتینگ مجزا نیست؛ بلکه یک روش برای نوشتن المنت‌های React در داخل کدهای جاوااسکریپت است. استفاده از JSX کاملاً اختیاری است، اما به شدت توسط تیم React و جامعه توسعه‌دهندگان آن توصیه می‌شود، زیرا به نوشتن کدهای خواناتر و گویاتر کمک شایانی می‌کند.

چرا از JSX استفاده می‌کنیم؟

React بر این ایده استوار است که منطق رندر کردن ذاتاً با سایر منطق‌های UI (مانند مدیریت رویدادها و وضعیت) در ارتباط است. به جای جداسازی مصنوعی تکنولوژی‌ها (قرار دادن HTML و جاوااسکریپت در فایل‌های جداگانه)، React با استفاده از کامپوننت‌ها، دغدغه‌ها (concerns) را از هم جدا می‌کند.

کد بدون JSX

برای درک بهتر ارزش JSX، بیایید ببینیم که کد React بدون آن چگونه خواهد بود. برای ساخت المنت‌ها بدون JSX، باید از متد React.createElement() استفاده کنیم.

JAVASCRIPT (React without JSX)

// This is what the code looks like without JSX
return React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

همانطور که می‌بینید، این سینتکس بسیار پرجزئیات و سخت‌خوان است، به خصوص وقتی با ساختارهای UI تودرتو و پیچیده سروکار داریم.

کد معادل با JSX

حالا همان کد را با JSX ببینید:

JAVASCRIPT (React with JSX)

// This is the equivalent code with JSX
return <h1 className="greeting">Hello, world!</h1>;

این نسخه بسیار شبیه‌تر به HTML است و به صورت بصری، ساختار UI را بهتر نمایش می‌دهد. در پشت صحنه، ابزاری مانند Babel این کد JSX را به فراخوانی‌های React.createElement() معادل آن ترجمه می‌کند تا مرورگر بتواند آن را درک کند. JSX به ما اجازه می‌دهد تا از قدرت کامل جاوااسکریپت در کنار یک سینتکس اعلانی و خوانا برای تعریف UI بهره‌مند شویم.

در این درس، با JSX به عنوان یک افزونه سینتکسی قدرتمند آشنا شدیم و دیدیم که چگونه با ترکیب سادگی HTML و قدرت جاوااسکریپت، به ما در نوشتن کامپوننت‌های خوانا و قابل نگهداری کمک می‌کند. درک این نکته که JSX تنها یک «شکر سینتکسی» (syntactic sugar) برای React.createElement() است، به ما در فهم عمیق‌تر نحوه کار React کمک می‌کند.

اکنون که می‌دانیم JSX چیست و چرا از آن استفاده می‌کنیم، در درس بعدی به «قوانین نگارشی JSX و تفاوت آن با HTML» خواهیم پرداخت و با جزئیات سینتکس آن بیشتر آشنا خواهیم شد.