رابطه و تفاوت React و JSX

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

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

تفاوت میان React و JSX چیست؟

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

JSX در React چه کاری را انجام می‌دهد؟

JSX یک گسترش دهنده سینتکسی جاوا اسکریپت است که به شما اجازه می‌دهد به شکل XML کدهای جاوا اسکریپتی خود را بنویسید. البته استفاده از JSX در قالب React اجباری نیست اما محبوب‌ترین انتخابی‌ست که در میان توسعه دهندگان ری‌اکت وجود دارد و در نهایت این موضوع باعث می‌شود که خواناتر و مفهومی‌تر باشد.

در خود مستندات React به این شکل در ارتباط با JSX نوشته شده است:

JSX یک Syntax Extension برای جاوا اسکریپت است. ما پیشنهاد می‌کنیم که در دنیای React از این سینتکس استفاده کنید. شاید فکر کنید که JSX یک زبان قالب‌نویسی یا Templating است اما بدانید که تمام قدرت جاوا اسکریپت در این سینتکس نیز وجود دارد.

JSX به شما این قدرت را می‌دهد که المان‌های سفارشی با قابلیت استفاده مجدد را در اپلیکیشن‌های React خود بسازید. برای مثال ما در زیر یک قطعه کد آورده‌ایم که کامپوننت Main در داخل تگ main جایی گرفته است. اگر با ساز و کار این سینکس و React آشنایی داشته باشید می‌دانید که شما امکان استفاده از عبارات جاوا اسکریپتی در داخل تگ‌های HTML را نیز دارید. در مثال زیر متن «Main Content» یک عبارت است که به صورت متن رندر خواهد شد.

const Main = () => {
  return (
    <main>Main content</main>
  );
}

export default Main

همچنین در قطعه کد پائین می‌توانید شیوه استفاده آن در React را مشاهده کنید.

import Component from "./Component"

const App = () => {
  return (
    <div className="App">
      <h1>Hello From React</h1>
      <Component />
    </div>
  );
}

export default App

زمانی که شما از JSX استفاده می‌کنید آزاد هستید که هر گونه المان معتبر HTMLیی را وارد کدهای خودتان بکنید و مهمتر از آن اینکه می‌توانید عبارات جاوا اسکریپتی بنویسید که کامپوننت Reactیی شما را بیان می‌کنند.

پس تفاوت JSX و HTML چیست؟

خب تا به اینجای کار ما با این قضیه روبرو شدیم که JSX چیست و چه استفاده‌ای می‌تواند داشته باشد، همچنین فهمیدیم که JSX یک زبان یا تکنولوژی جدای از React نیست بلکه در خدمت آن و داخل آن است. حال در این مرحله وقت آن است که خود JSX به مثابه یک سینتکس جدید را با HTML‌ مقایسه بکنیم.

تفاوت اصلی در اینجاست که تگ‌های JSX در نهایت به المان‌های محلی و لوکال جاوا اسکریپت تبدیل خواهند شد در صورتی که HTML مانند همان حالت همیشگی باقی می‌ماند. دلیل این موضوع نیز این است که JSX به صورت مستقیم توسط مرورگر درک نمی‌شود بلکه باید به جاوا اسکریپت تبدیل شده و در نهایت از طریق جاوا اسکریپت اجرا شود. اما در نهایت این بحث یک نکته مثبت دیگر نیز دارد و آن این است که شما قابلیت استفاده از کدهای جاوا اسکریپتی را در داخل خود JSX خواهید داشت و در این زمینه محدودیتی وجود ندارد.

این موضوع را نیز به خاطر داشته باشید که شما امکان استفاده از هر المان HTML در داخل JSX را دارید اما نمی‌توانید از JSX در فایل HTML استفاده کنید.

یکی از مزیت‌های اصلی استفاده از JSX این است که شما به سادگی می‌توانید HTML را در آن ادغام کرده و به صورت بسیار واضح‌تری بگویید که دقیقا چه چیزی را می‌خواهید نشان بدهید. برای مثال به قطعه کد زیر نگاه کنید:

// Without JSX
const fruits = ["apple", "banana", "cherry"];

// With JSX
const jsxFruits = [<li>apple</li>, <li>banana</li>, <li>cherry</li>];

چرا JSX خوب است؟

کدهایی که با JSX نوشته می‌شوند قابلیت درک کردن و خوانایی بسیار بالاتری نسبت به حالت عادی دارند. به همین دلیل برای افرادی که نیاز دارند تا کدهای‌شان بهتر توسط یک تیم دیده شود و به دنبال یک زبان مشترک در بین افراد تیم هستند این مورد می‌تواند مزیت‌های بسیاری برای‌شان داشته باشد.

قابلیت استفاده پذیری مجدد

یکی از مهمترین موضوعاتی که باعث می‌شود ما به صورت بهتر و البته سریع‌تری اپلیکیشن‌های مدرن را توسعه دهیم این است که بتوانیم کدهایی که نوشته‌ایم را مجددا استفاده کنیم و یک پایه کدنویسی مناسب برای کامپوننت‌های مختلف ایجاد کنیم. این دقیقا کاری‌ست که با استفاده از JSX می‌توانید آن را ایجاد کنید.

خوانایی بالا

همانطور که گفتیم کدهایی که با استفاده از JSX نوشته شود از قابلیت خوانایی بسیار بالایی برخوردار است. یکی از دلایل آن نیز استفاده از المان‌های HTML است. برای مثال اگر شما یک حلقه را در جاوا اسکریپت پیاده سازی می‌کنید معلوم نیست دقیقا به چه منظور قصد دارید از آن استفاده کنید. اما در JSX در کنار پیاده سازی یک حلقه می‌توانید صراحتا از المان li استفاده کنید تا نشان دهید که محتوای این حلقه قرار است به شکل یک لیست یا فهرست نمایش داده شود.

چگونه React را یاد بگیریم؟

در قدم‌ اول شما به عنوان کسی که قصد دارید React را یاد بگیرید نیاز دارید که درک خوبی از ساختار اپلیکیشن‌ های مبتنی بر وب داشته و با سه تکنولوژی اصلی توسعه رابط کاربری یعنی HTML/CSS/JS آشنایی داشته باشید. برای این منظور می‌توانید از دوره های آموزشی زیر استفاده کنید.

بعد از این مرحله نیاز است که کمی بیشتر در رابطه با جاوااسکریپت اطلاع پیدا کنید. برای این موضوع نیاز است که استاندارد اکمااسکریپت ۶، ۷ و ۸ را یاد بگیرید که برای این منظور نیز می‌توانید از دوره‌های زیر استفاده کنید.

آموزش جاوا اسکریپت ES6

آموزش جاوا اسکریپت ES7 و ES8

بعد از گذراندن این مراحل ضروری می‌توانید از صفحه «یادگیری React» استفاده کرده و آموزش‌ها را به صورت قدم به قدم پیش گرفته و آن‌ها را یاد بگیرید.

در پایان

مطمئنا استفاده از JSX یک موضوع جدی‌ست در غیر اینصورت نمی‌توانست تا به این حد پر استفاده باشد و همچنین مستندات React تا به این حد روی آن اصرار داشته باشد.