JSX (JavaScript)

JSX (ראשי תיבות של JavaScript Syntax Extension) היא הרחבה לתחביר של שפת JavaScript מבית React. הרחבה זו מאפשרת למפתח הכותב ב-JavaScript (או ב-TypeScript; במקרה כזה הסיומת תהיה .tsx) לבנות רכיבים באמצעות תחביר הדומה במראהו ל-HTML.

רכיבי React נכתבים בדרך כלל באמצעות JSX, אך ניתן לכתוב אותם גם באמצעות שפת JavaScript פשוטה. JSX דומה להרחבת תחביר אחרת שנוצרה על ידי פייסבוק עבור שפת השרת PHP, בשם XHP.

תחביר

דוגמה לקוד JSX:

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

רכיבים מקוננים

במידה והמתכנת מעוניין לשלב רכיבים באותה הרמה, עליו לעטוף אותם ברכיב React אחר או ברכיב "כללי" הנקרא Fragment ומיוצג על ידי התגית <React.Fragment> (או בקיצור: <></>), או להחזיר אותם כמערך, בצורה מותנית או כחלק מswitch-case.

function Element1() {
   return (
     <div>Hello!</div>
   );
}

function Element2() {
   return (
     <div>My name is ABC!</div>
   );
}

function ElementNesting() {
   return (
      <>
       <Element1 />
       <Element2 />
     </>
   );
}

ביטויים

ניתן לשלב בקוד JSX ביטויים בשפת JavaScript (אך לא הצהרות על משתנים). כך לדוגמה הקוד הבא

<span>{10+12}</span>

ירונדר בדפדפן כך:

<span>22</span>

הצגה מותנית של אלמנטים

לא ניתן להשתמש בהוראות תנאי מהצורה if-else בתוך אלמנטי JSX; במקום זאת משתמשים בביטויים המייצגים תנאי על מנת להציג אלמנטים בצורה מותנית.

הדוגמה הבאה מצהירה על קבוע i שערכו שווה ל-2. לאחר מכן, היא בודקת האם ערכו של הקבוע אכן 2 באמצעות הביטוי i === 2 ? 'true' : 'false'; כיוון שהתוצאה נכונה, התוצאה שתוצג בדפדפן היא true.

export default function App() {
  const i=2;
  return (
    <div>
      <h1>The result is {i === 2 ? 'true' : 'false'} !</h1>
    </div>
  );
}

הקוד ירונדר בדפדפן כך:

<div>
  <h1>The result is true !</h1>
</div>

קישורים חיצוניים

• אתר האינטרנט הרשמי של JSX (באנגלית)
• טיוטה: מסמך האפיון של JSX