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

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

הקלידו את הקוד הבא בקומפוננטה page.tsx:

export default function Home() {
  const favoriteNumber = Math.floor(Math.random() * 100);
  return (
    <div>
      <h1>Hi! My favorite number is: {favoriteNumber}</h1>
    </div>
  );
}

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

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

export default function Home() {
  const n = Math.random();

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

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

export default function Home() {
  const n = Math.random();
  const isEntering = n > 0.5;

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

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

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

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

export default function Home() {
  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 סביבם:

export default function Home() {
  return (
    <>
      <p>Hi! My name is Ynon</p>
      <p>Nice to meet you</p>
    </>
  );
}

4. שילוב קומפוננטה מקובץ אחר

נפתח תיקייה חדשה בתוך src/app בשם components ובתוכה ניצור קובץ בשם src/app/components/number.tsx ובתוכו נכתוב את התוכן הבא:

export default function Number() {
  const number = Math.floor(Math.random() * 10);
  return (
    <p>The number is: {number}</p>
  )
}

בקובץ page.tsx נכתוב את הקוד הבא כדי לשלב את הקומפוננטה מהקובץ number.tsx:

import Number from './components/number';

export default function Home() {
  return (
    <div>
      <Number />
      <Number />
      <Number />
    </div>
  );
}

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

5. עכשיו אתם

1. כתבו קובץ נפרד בשם header.tsx שמציג שורת כותרת h1 עם style משלה.

2. כתבו קובץ נפרד בשם main.tsx שמציג כותרת h1 וטקסט בתוך p, הפעם ללא כללי עיצוב.

3. הציגו את שתי הקומפוננטות בתוך קומפוננטת page.tsx שלכם.