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

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) تا حد امکان جلوگیری شود.

روند اجرای اکسپرشن در 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 همه فن حریف تبدیل می‌شوی که آماده ی استخدام، دریافت پروژه و یا فول-استک شدن هستی.