לימוד React
תיאור ה-UI

כתיבת סימון עם JSX

JSX הוא סיומת תחביר עבור JavaScript המאפשרת לך לכתוב סימון דמוי HTML בתוך קובץ JavaScript. למרות שיש דרכים אחרות לכתוב רכיבים, רוב מפתחי React מעדיפים את התמציתיות של JSX, ורוב בסיסי הקוד use זה.

You will learn

  • מדוע React מערבב סימון עם היגיון רינדור
  • איך JSX שונה מHTML
  • כיצד להציג מידע עם JSX

JSX: הכנסת סימון ל-JavaScript

האינטרנט נבנה על HTML, CSS וJavaScript. במשך שנים רבות, מפתחי אתרים שמרו על תוכן ב-HTML, עיצוב ב-CSS והיגיון ב-JavaScript - לרוב בקבצים נפרדים! התוכן סומן בתוך HTML בעוד ההיגיון של הדף חי בנפרד ב-JavaScript:

HTML markup with purple background and a div with two child tags: p and form.
HTML markup with purple background and a div with two child tags: p and form.

HTML

Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.
Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.

JavaScript

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

React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.
React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.

Sidebar.js React רכיב

React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.
React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.

Form.js React רכיב

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

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

Note

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

המרת HTML ל-JSX

נניח שיש לך כמה (תקף לחלוטין) HTML:

<h1>Hedy Lamarr's Todos</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
</ul>

ואתה רוצה להכניס את זה לרכיב שלך:

export default function TodoList() {
  return (
    // ???
  )
}

אם תעתיק ותדביק אותו כפי שהוא, זה לא יעבוד:

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve the spectrum technology
    </ul>

זה בגלל שuse JSX מחמיר יותר ויש לו כמה כללים יותר מHTML! אם תקרא את הודעות השגיאה למעלה, הן ידריכו אותך לתקן את הסימון, או שאתה יכול לעקוב אחר המדריך למטה.

Note

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

הכללים של JSX

1. החזר אלמנט שורש בודד

כדי להחזיר רכיבים מרובים מרכיב, עטפו אותם בתג אב יחיד.

לדוגמה, אתה יכול use a <div>:

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

אם אינך רוצה להוסיף <div> לסימון שלך, אתה יכול לכתוב <> ו-</> במקום זאת:

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

תג ריק זה נקרא Fragment. Fragments מאפשרים לך לקבץ דברים מבלי להשאיר עקבות בעץ HTML של הדפדפן.

Deep Dive

מדוע צריך לעטוף תגיות JSX מרובות?

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

2. סגור את כל התגים

JSX מחייב סגירה מפורשת של תגים: תגיות סגירות עצמיות כמו <img> חייבים להפוך ל<img />, ותגי גלישה כמו <li>`oranges` חייבים להיכתב כ-

  • oranges
    • oranges.

    כך התמונה והרשימה של הדי למאר נראים סגורים:

    <>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        class="photo"
       />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve the spectrum technology</li>
      </ul>
    </>

    3. camelCase כל רוב הדברים!

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

    זו הסיבה שב-React, תכונות HTML ו-SVG רבות נכתבות ב-camelCase. לדוגמה, במקום stroke-width אתה use strokeWidth. מכיוון שclass היא מילה שמורה, ב-React אתה כותב במקום זאת className, על שם המאפיין DOM המקביל:

    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      className="photo"
    />

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

    Pitfall

    מסיבות היסטוריות, aria-* ו-data-* תכונות נכתבות כמו ב-HTML עם מקפים.

    טיפ מקצועי: השתמש בממיר JSX

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

    הנה התוצאה הסופית שלך:

    export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve the spectrum technology</li>
      </ul>
    </>
  );
}

    Recap

    עכשיו אתה יודע למה JSX קיים וכיצד use אותו ברכיבים:

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

    נסו כמה אתגרים

    Challenge 1 of 1:
    המר כמה HTML לJSX

    HTML זה הודבק ברכיב, אך הוא אינו חוקי JSX. תקן את זה:

    export default function Bio() {
  return (
    <div class="intro">
      <h1>Welcome to my website!</h1>
    </div>
    <p class="summary">
      You can find my thoughts here.
      <br><br>
      <b>And <i>pictures</b></i> of scientists!
    </p>
  );
}

    אם לעשות זאת ביד או להשתמש בממיר זה תלוי בך!

    Previousייבוא וייצוא קומפוננטות
    NextJavaScript ב-JSX עם סוגריים מסולסלים

    How do you like these docs?