היכרות עם JSX

הביטו על הצהרת משתנה זו:

const element = <h1>שלום, עולם!</h1>;

תחביר התג המצחיק הזה הוא לא מחרוזת ולא HTML.

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

JSX מייצר “אלמנטים” של React. אנחנו נחקור כיצד לרנדר אותם ל-DOM בחלק הבא. למטה, תוכלו למצוא את היסודות של JSX הדרושים על מנת שתוכלו להתחיל.

למה JSX?

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

במקום להפריד באופן מלאכותי בין טכנולוגיות על ידי השמת ה-markup והלוגיקה בקבצים נפרדים, React מבצעת הפרדת אחריות בעזרת יחידות המקושרות בצורה רופפת הנקראות “קומפוננטות” אשר מכילות את שניהם. נחזור לקומפוננטות בחלק אחר, אבל אם עדיין לא נוח לכם לשים את ה-markup ב-JS, ההרצאה הזאת עשויה לשכנע אתכם.

React לא דורשת שימוש ב-JSX, אבל רוב האנשים מוצאים את זה מועיל בתור סיוע ויזואלי בעת עבודה עם ממשקי משתמש בתוך קוד JavaScript. זה גם מאפשר ל-React להראות הודעות שגיאה והתרעה יותר שימושיות.

עכשיו שהסרנו את זה מהדרך, בואו נתחיל!

הטמעת ביטויים ב-JSX

בדוגמה הבאה, אנו מכריזים על משתנה הנקרא name (שם) ולאחר מכן משתמשים בו בתוך JSX על ידי עטיפתו בסוגריים מסולסלים:

const name = 'גיא פרץ';const element = <h1>שלום, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

ניתן לשים כל ביטוי JavaScript חוקי בתוך סוגריים מסולסלים ב-JSX. לדוגמה, 2 + 2, user.firstName, או formatName(user) הם כולם ביטויים חוקיים ב-JavaScript.

בדוגמה הבאה, אנו מטמיעים את התוצאה של קריאה לפונקציית ה-JavaScript, formatName(user), לתוך אלמנט <h1>.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'הדר',
  lastName: 'פרץ'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);

נסו את זה ב-codepen

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

JSX גם הוא ביטוי

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

זה אומר שאתם יכולים להשתמש ב-JSX בתוך הצהרות if ולולאות for, להקצות אותו למשתנים, לקבל אותו כארגומנטים, ולהחזיר אותו מפונקציות:

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

ציון מאפיינים עם JSX

ניתן להשתמש בגרשיים כדי לציין מחרוזות כמאפיינים:

const element = <a href="https://www.reactjs.org"> link </a>;

תוכלו גם להשתמש בסוגריים מסולסלים כדי להטמיע ביטוי ב-JavaScript במאפיין:

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

אל תוסיפו גרשיים סביב סוגריים מסולסלים בעת הטמעת ביטוי JavaScript במאפיין. עליכם להשתמש בגרשיים (עבור ערכי מחרוזת) או בסוגריים מסולסלים (עבור ביטויים), אך לא בשניהם באותו המאפיין.

אזהרה:

מכיוון ש- JSX קרוב יותר ל- JavaScript מאשר ל- HTML, React DOM משתמש בקונבנציית שמות מאפיינים בצורת camelCase במקום בשמות של תכונות HTML.

לדוגמה, class הופך ל-className ב-JSX, ו-tabindex הופך ל-tabIndex.

ציון ילדים עם JSX

אם תגית כלשהי ריקה, באפשרותכם לסגור אותה מיידית עם />, כמו ב-XML:

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

תגיות JSX יכולות להכיל ילדים:

const element = (
  <div>
    <h1>שלום!</h1>
    <h2>טוב לראות אותך כאן.</h2>
  </div>
);

JSX מונע התקפות הזרקה

זה בטוח להטמיע קלט משתמש ב-JSX:

const title = response.potentiallyMaliciousInput;
// זה בטוח:
const element = <h1>{title}</h1>;

כברירת מחדל, React DOM מבצע escape עבור ערכים מוטמעים ב-JSX לפני שהוא מרנדר אותם. דבר זה מבטיח שאף פעם לא תוכלו להזריק שום דבר שלא כתוב במפורש באפליקציה שלכם. כל דבר מומר למחרוזת לפני שהוא מרונדר. זה עוזר למנוע התקפות XSS (cross-site-scripting).

JSX מייצג אובייקטים

Babel מקמפל JSX לקריאות ל-React.createElement().

שתי הדוגמות הבאות זהות:

const element = (
  <h1 className="greeting">
    שלום, עולם!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'שלום, עולם!'
);

React.createElement() מבצעת כמה בדיקות כדי לעזור לכם לכתוב קוד ללא באגים אבל בעיקרון היא יוצרת אובייקט כזה:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'שלום, עולם!'
  }
};

אובייקטים אלה נקראים “אלמנטים של React”. אתם יכולים לחשוב עליהם כמו תיאורים של מה שאתם רוצים לראות על המסך. React קוראת את האובייקטים האלה ומשתמשת בהם כדי לבנות את ה-DOM ולשמור אותו מעודכן.

אנו נחקור את תהליך רינדור האלמנטים של React ל-DOM בחלק הבא.

טיפ:

אנו ממליצים להשתמש בהגדרת השפה של “Babel” עבור העורך שלך כך שגם קוד ES6 וגם קוד JSX מודגשים כראוי.