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

1. הזרקת קוד JavaScript בתוך קוד פקד

ניזכר בקוד הבא שכתבנו לפני מספר שיעורים:

function Person(props) {
  const { name } = props;
  return (
    <div>
      <h2>[{name}] Hello World!</h2>
      <hr />
    </div>
  );
}

בתוך סוגריים מסולסלים אנחנו יכולים לכתוב קוד JavaScript ובאופן אוטומטי ריאקט יריץ את הקוד הזה וישלב את התוצאה ב Virtual DOM שהפונקציה מחזירה.

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

function App() {
  const n = Math.random();

  return (
    <div className="App">
      <p>{n}</p>
      {n > 0.5 ? <p>Hello</p> : <p>Bye bye</p>}
    </div>
  );
}

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

2. הגדרת מאפיין Style באמצעות אוביקט

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

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

function App() {
  const n = Math.random();
  let text, style;

  if (n > 0.5) {
    text = "Hello";
    style = { color: "blue" };
  } else {
    text = "Bye bye";
    style = { color: "red" };
  }

  return (
    <div className="App">
      <p>{n}</p>
      <p style={style}>{text}</p>
    </div>
  );
}

3. החזרת מערך של אלמנטים מפונקציית פקד

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

הפקד הבא יהפוך ב HTML לשני אלמנטי p בלבד בלי אף div סביבם:

function Person(props) {
  const { name } = props;
  return (
    <>
      <p>Hi! My name is {name}</p>
      <p>Nice to meet you</p>
    </>
  );
}

4. סיכום

בשיעור זה ראינו מספר מאפיינים של JSX באמצעותם נוכל לכתוב פקדים חכמים יותר בתוכניות שלנו:

1. ראינו איך לשלב קוד JavaScript בתוך קוד פקד.

2. ראינו איך לקבוע Inline Style לפקדים שלנו (כאשר צריך לזכור שזו ממש לא האופציה היחידה לעצב פקדים, ואפשר עדיין להשתמש ב CSS וקביעת שם הקלאס כמו ב HTML רגיל).

3. ראינו איך לוותר על ה div העוטף כשאנחנו צריכים להחזיר מספר אלמנטים מפקד יחיד.