جی‌اس‌اکس (جاوااسکریپت)

افزونه سینتکس جاوااسکریپت (به انگلیسی: JavaScript Syntax Extension) به‌اختصار جی‌اس‌اکس (به انگلیسی: JSX) که گاهی اوقات به عنوان «جاوا اسکریپت اکس‌ام‌ال» نیز شناخته می‌شود یک نسخه گسترش‌یافته ری‌اکت برای سینتکس زبان جاوااسکریپت است که راهی برای ایجاد رندر کامپوننت‌ها با استفاده از سینتکسی که برای بسیاری از توسعه‌دهندگان آشنا است ارائه می‌دهد.

جی‌اس‌اکس از نظر ظاهری شبیه به اچ‌تی‌ام‌ال است.

کامپوننت‌های ری‌اکت معمولاً با استفاده از جی‌اس‌اکس نوشته می‌شوند، اگرچه می‌توان آنها را نیز با جاوا اسکریپت معمولی نوشته نوشت.

جی‌اس‌اکس شبیه به نسخه گسترش‌یافته سینتکسی است که توسط شرکت متا برای پی‌اچ‌پی به نام اکس‌اچ‌پی ایجاد شده‌است.

نشانه‌گذاری

نمونه ای از کد جی‌اس‌اکس:

const App = () => {
   return (
     <div>
       <p>Header</p>
       <p>Content</p>
       <p>Footer</p>
     </div>
   )
}

عناصر تو در تو

عناصر چندتایی در یک سطح باید زیرمجموعه یک عنصر ری‌اکت باشند، مانند عنصر <div> نشان داده‌ شده در کدهای بالا، قطعه‌ای که با <Fragment> یا به شکل کوتاه آن <> مشخص شده‌است یا به عنوان یک آرایه برگردانده شود.

اتریبیوت‌ها

جی‌اس‌اکس طیف وسیعی از اتریبیوت‌های یک عنصر را ارائه می‌کند که برای منعکس کردن ویژگی‌های ارائه شده توسط اچ‌تی‌ام‌ال طراحی شده‌اند. اتریبیوت‌‌های سفارشی نیز می‌توانند در هر کامپوننتی مورد استفاده قرار بگیرند. تمام اتریبیوت‌‌ها توسط کامپوننت به عنوان پراپ (props) دریافت خواهند شد.

عبارات جاوااسکریپت

اکسپرشن‌ (expressions) های جاوااسکریپت و نه استیتمنت‌ (statements) ها را می‌توان در داخل جی‌اس‌اکس با استفاده از دو آکودلاد استفاده کرد {} :

 <h1>{10+1}</h1>

مثال بالا به‌صورت زیر رندر خواهد شد:

 <h1>11</h1>

عبارات شرطی

عبارات شرطی if–else جاوااسکریپت را نمی‌توان در جی‌اس‌اکس استفاده کرد، اما می‌توان به جای آن از اکسپرشن‌های شرطی ? : استفاده کرد. در مثال زیر { i === 1 ? 'true' : 'false' } به‌صورت رشته true رندر خواهد‌ شد زیرا i برابر 1 است.

function App() {
  const i = 1

  return (
   <div>
    <h1>{ i === 1 ? 'true' : 'false' }</h1>
   </div>
  )
}

کد بالا در نهایت به‌صورت زیر خواهد‌ بود:

<div>
  <h1>true</h1>
</div>

توابع و جی‌اس‌اکس را می‌توان به صورت شرطی استفاده کرد:

const App = () => {
   const sections = [1, 2, 3]

   return (
     <div>
       {sections.map((n, i) => (
               Section {n} {i === 0 && <span>(first)</span>}
           </div>
       ))}
     </div>
   )
}

به‌صورت زیر رندر می‌شود:

<div>
  <div>Section 1<span>(first)</span></div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

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

پیوند به بیرون

• جی‌اس‌اکس در مستندات ری‌اکت