JSX

היכרות עם JSX

אם אי פעם יישמת יישום אינטרנט עם המסגרת "React.js", אולי שמת לב שתחביר הכתיבה של רכיבי React.js נראה קצת שונה מקוד Javascript האחר שלך. למרות שרובם זהים, רכיבי React מתוארים באמצעות סוגריים מיוחדים, סוגרי הזווית השמאלית והימנית. הם נראים ממש כמו תחביר ל- XML, "שפת הסימון להרחבה". ב- React.js, תחביר זה נקרא באופן דומה "JSX", שפירושו "XML Javascript".

המטרה העיקרית של תחביר זה היא לפשט את כתיבת קוד React. לא ניתן לפרש את קוד JSX על ידי JVMs, ולכן יש לאסוף אותו לקוד Javascript אמיתי לפני השימוש - משימה שבדרך כלל מבוצעת על ידי אספנים כגון Babel או Webpack.

קוד React שכנראה מעולם לא כתבת

זה למעשה אומר שסביר מאוד שמעולם לא כתבת רכיבי React.js "אמיתיים" כאלה שנוצרים מקוד JSX שלך. אך אל דאגה, ניתן לעשות זאת בקלות ללא טרחה רבה. למעשה, אתה יכול אפילו לכתוב יישום אינטרנט שלם של React מבלי להשתמש ב- JSX. קטע הקוד הבא מראה כיצד נראה באמת רכיב React.js עם Javascript בלבד.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

אתה יכול אפילו לנסות זאת בדפדפן שלך, מבלי להתקין תוכנה כלשהי! פשוט גלול מטה עד סוף דף זה כדי להשתמש בקישור בתוספת.

שימוש ב- JSX כדי לפשט את הקוד שלך

כפי שאתה יכול לראות, היתרון העיקרי של תחביר JSX הוא להפוך את הקוד הקשור לממשק שלך לפשוט יותר לכתיבה וקל יותר להבחין מחלקים אחרים ביישום שלך, שכן התחביר דמוי ה- XML מספק אינדיקציה ברורה לתחום הקוד.

מאפיין גדול נוסף של JSX הוא שזה פשוט הופך לביטוי לאחר שלב האוסף. לכן תוכל להשתמש בו בהצהרות if-else-או אפילו לאחסן את התוצאה שלו במשתנה. ומכיוון שרכיבי React.js יכולים להכיל ביטויים כילדים עצמם, אתה יכול לכתוב קוד ממשק מאוד מורכב!

ייבוא ברירת מחדל לכל קובץ JSX

ייתכן ששמת לב שלכל קובץ JSX בהדרכות שונות, במדריכים וסביר להניח שאפילו בקוד שלך יש את יבוא ברירת המחדל מספריית React, למרות שלעולם לא תוכל לקרוא למשתנה המיובא הזה ישירות. הסיבה מאחוריה היא שאחרי שלב האוסף, כל ביטוי JSX הופך לשיחת "React.createElement", כפי שראית בדוגמת הקוד בעבר. לכן יש צורך לשנות את ה- "React" מיבוא ברירת המחדל בהיקף של כל קובץ.

נראה כמו HTML, אבל לא

אילוץ מפתח אחד בעת קידוד בתחביר JSX הוא ציון שם הרכיב שלך. כדי שהאוצר יוכל לזהות את הרכיבים שלך בצורה נכונה, הם חייבים להיות ייחודיים מתגי ה- HTML הסטנדרטיים, שכן התחביר נראה אותו דבר.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

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

גרסה מסוג Typescript

אולי שמתם לב שפרויקטים רבים משתמשים גם ב- TSX כסיומת קבצים עבור קבצי הרכיבים שלהם React.js. זוהי רק הרחבה של ה- JSX המקורי כך שתתאים ל- Typescript. קבצי TSX מאפשרים לך לכתוב קוד Typescript יחד עם רכיבי סימון JSX.

רק ההתחלה

מאמר זה סיפק מבוא פשוט ל- JSX לקידוד רכיבי React. היתרון העיקרי הוא תחביר מאוד תמציתי שמרגיש טבעי בסביבת אינטרנט. אתה יכול לכתוב אלמנטים מאוד מורכבים עם מעט מאוד קוד, שללא ספק הוא גורם מפתח אחד במדינתו המפורסמת והפופולרית הנוכחית של ריאקט. אם אתה סקרן ישנם הרבה יותר מדריכים מפורטים ומעולים של צוות React באתר שלהם, הקישורים נמצאים בתוספת בסוף דף זה.