JSX چیست و چه کاربردی در React دارد؟

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

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

تفاوت React و React Native چیست؟

React یک فریمورک جاوا اسکریپتی متن‌باز، رایگان و انعطاف‌پذیر است که به‌منظور طراحی رابط کاربری مورد استفاده قرار می‌گیرد. تمرکز اصلی ری اکت روی برنامه‌های تحت مرورگر است. در حالیکه شاخه‌ی دیگر آن یعنیReact Nativeبرای ساخت اپلیکیشن‌های تلفن همراه استفاده می‌شود. شاید بهتر باشد تفاوت React و React Native را این‌گونه توضیح دهیم که React یک کتابخانه‌ی جاوا اسکریپت به نام React Js دارد که فریمورک React Native از آن استفاده می‌کند.

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

استاندارد ECMAScript

ECMAScript (اکما اسکریپت یا ES) به منظور استانداردسازی جاوا اسکریپت جهت تقویت پیاده‌سازی چندگانه مستقل ایجاد شده است. ES نسخه‌های متفاوتی دارد که پرکاربردترین آن‌ها، نسخه‌های 5 و 6 ( ES5 و ES6) هستند. این نسخه‌ها توسط همه‌ی مرورگرها پشتیبانی می‌شوند.

تکنولوژی ES و نسخه‌های مختلف آن ویژگی‌های خاص خود را دارند و سال‌ها است که توسط توسعه دهندگان React استفاده می‌شوند. اما تکنولوژی محبوب دیگری به نام JSX وجود دارد که در اینجا قصد داریم با آن آشنا شویم.

JSX چیست؟

JSX) JavaScript Extention) افزونه‌ای برای ری اکت است که به شما کمک می‌کند کدها را مانند کد HTML بنویسید. قطعه کد زیر را ببینید:

const element = <h1>Hello, world!</h1>;

این خط، یک کد HTML نیست بلکه سینتکسی متفاوت و مبتنی بر HTML/XML از زبان جاوا اسکریپت دارد و به همراه کدهای React استفاده می‌شود. JSX یک قالب یا فریمورک جدید نیست بلکه همان زبان جاوا اسکریپت و فقط با ساختار دستوری دیگری است که در ایجاد کامپوننت‌ها (Component) و المان‌های (Element) مختلف برای React DOM کاربرد دارند.

ارتباط JSX و Dom

DOM چیست؟

DOM یا Document Object Model مجموعه‌ای از استانداردهای منطقی جهت نمایش صفحات وب است. در حقیقت DOM ساختار درختی یک سایت است که شامل المان‌ها، ویژگی‌ها و گره‌های به کار رفته در یک سایت می‌شود و همچنین دسترسی لازم را ایجاد می‌کند تا به راحتی بتوان هرکدام از این بخش‌ها که در واقع المان‌های مختلف یک صفحه وب هستند را تغییر داد.

ReactDOM چیست؟

ReactDOM مجموعه‌ای (Package) از توابع مربوط به DOM را برای توسعه دهندگان ری اکت فراهم می‌کند تا به راحتی توانایی تغییر رابط کاربری صفحات را داشته باشند.

کاربرد JSX در React چیست؟

پیش از این گفتیم که ری اکت فریمورکی برای پیاده‌سازی رابط کاربری در پروژه است بنابراین، توابع و هرآنچه مربوط به آماده‌سازی اطلاعات برای نمایش و رندر کردن (Rendering) است، اهمیت زیادی پیدا می‌کند.

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

کد JSX زیر را در نظر بگیرید:

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

همین کد هنگام کامپایل و تبدیل شدن به جاوا اسکریپت معمولی به شکل زیر خواهد بود:

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "blog"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

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

اکسپرشن در JSX

فرض کنید یک متغیر با نام name دارید و می‌خواهید آن را در قالب JSX در برنامه‌ی خود به کار ببرید. کافی است به صورت زیر عمل کنید:

const name = '7learn';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

همانطور که در کد بالا می‌بینید، name، در یک متغیر دیگر با نام element قرار گرفته و در نهایت element به DOM اضافه می‌شود. دقت کنید که علاوه بر یک رشته‌ی ساده، شما می‌توانید هرگونه عبارت معناداری را درون {} قرار داده و به عنوان JSX استفاده کنید. این عبارت معنادار می‌تواند یک عبارت ریاضی مانند x+y، یک متغیر بولینی (true یا false) یا حتی خروجی یک تابع باشد. برای مثال، در کد زیر دو عبارت 7learn.com و 7learn در تابع print کنار یکدیگر قرار گرفته و در نهایت درون المان DOM می‌نشینند:

function print(user) {
  return website.name+ ' in ' + website.address;
}
const website= {
  name: '7learn',
  address: '7learn.com'
};
const element = (
  <h1>
    Check, {print(website)}!
  </h1>
);
ReactDOM.render(
  element,
  document.getElementById('root')
);

کد JSX بالا به منظور خوانایی بیشتر، به چندین خط تقسیم شده است. در حالی که اجباری به این کار نیست. اما توصیه می‌کنیم که وقتی این کار را انجام می‌دهید، عبارت را درون پرانتز قرار دهید تا از خطاهای نوشتار مانند فراموشی ; (semicolon) تا حد امکان جلوگیری شود.

ارتباط برنامه JS و کاربر

روند اجرای اکسپرشن در JSX

یک عبارت (expression) نوشته شده در قالب JSX، بعد از اینکه کامپایل می‌شود، در توابع داخلی جاوا اسکریپت فراخوانی شده و با آن‌ مانند یک شی جاوا اسکریپتی برخورد می‌شود. معنی این جمله این است که می‌توانید از JSX در شرط‌ها، شمارنده‌ی حلقه‌ها و همانطور که در بخش قبل گفتیم، حتی به عنوان خروجی توابع استفاده کنید. به این صورت:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

پشتیبانی از تگ و متغیر در JSX

شما می‌توانید یک المان DOM را به صورت مستقیم در JSX قرار دهید:

const element = <div tabIndex="0"></div>;

یا همانند مثال‌های قبلی، یک متغیر تعریف کرده و مقدار آن را با استفاده از {} درون تگ المان پاس دهید:

const element = <img src={user.avatarUrl}></img>;

توجه داشته باشید که نمی‌توانید یک تگ را درون {} بگذارید. در واقع {} یک سینتکس برای گرفتن مقدار متغیر در قالب DOM است و برای خود المان‌های DOM معنی ندارد. همچنین برای استفاده از رشته‌ها درون یک تگ می‌توانید از ' ' استفاده کنید.

توجه: از آن‌جایی که JSX به جاوا اسکریپت نزدیک‌تر است، از قانون camelCase برای نام‌گذاری‌ها استفاده می‌کند. یعنی حرف اول کلمه‌ی اول کوچک و حرف اول کلمات بعدی بزرگ نوشته می‌شود. برای مثال، عبارت tabindex به صورت tabIndex نوشته شده است.

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

گفتیم که ES5 و ES6 نسخه‌هایی از جاوا اسکریپت هستند؛ در حالیکه JSX ساختاری جدید و مبتنی بر جاوا اسکریپت است. پس چه دلایلی ممکن است ما را قانع کند تا از جاوا اسکریپت دسته‌دوم استفاده کنیم؟

شما در JSX اجازه‌ی استفاده از Nested Componentها را دارید. یعنی می‌توان کامپوننت‌های تودرتو را ساخت و یک کامپوننت را به عنوان زیرشاخه‌ی یک کامپوننت دیگر تعریف کرد.
JSX سریع‌تر از جاوا اسکریپت معمولی است و هنگام تبدیل شدن به جاوا اسکریپت برای اجرا، بهینه‌سازی‌هایی را روی کدها انجام می‌دهد.
JSX رندر کردن و نشانه‌گذاری (Mark Up) داده‌ها را ساده‌تر می‌کند.
JSX پیاده سازی رابط کاربری یا UI را راحت‌تر کرده و تعداد کامپوننت‌ها را کاهش می‌دهد.
استفاده از JSX برای کسانی که تسلط چندانی به جاوا اسکریپت ندارند، آسان‌تر است.

جمع بندی:

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

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

اگر به یادگیری بیشتر در زمینه جاوا اسکریپت علاقه داری، با شرکت در دوره آموزش جاوا اسکریپت در کمتر از یک سال به یک متخصص JS همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام، دریافت پروژه و یا فول-استک شدن هستی.