JSX הוא לא HTML

חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 4 מתוך 42.

JSX נראה כמו HTML, אבל הוא נמצא בתוך JavaScript, וזה גורם לכמה הבדלים קטנים שתיתקלו בהם כל הזמן:

1. className במקום class. class היא מילה שמורה ב-JavaScript, ולכן JSX משנה את שם המאפיין:

<p className="warning">Careful!</p>

2. כל תג חייב להיסגר. HTML סולח על <br> ועל <input>; JSX לא. תגיות שנסגרות מעצמן מסתיימות ב־/>:

<input id="name" />
<br />

3. מאפיינים ב-camelCase. מאפיינים שמורכבים מכמה מילים נכתבים ב-camelCase: onclick → onClick, tabindex → tabIndex. תשתמשו הרבה ב-onClick כשנגיע לאירועים.

אתגר

מתחילים

לפסקה שלמטה דרושה מחלקת CSS, שנוספת בדרך של JSX.

תן לפסקה את מחלקת CSS notice (זכור: ב-JSX לא משתמשים בשם המאפיין class).
השאר את ה-id ואת הטקסט שלה ללא שינוי.

נסו בעצמכם

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>