סוגריים מסולסלים

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

JSX נעשה מעניין ברגע שמשלבים בו JavaScript. סוגריים מסולסלים { } פותחים חלון מהסימון שלך בחזרה אל JavaScript:

const name = 'Ada';

return <p>Hello, {name}!</p>;

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

בלי סוגריים מסולסלים, JSX מתייחס למה שמקלידים כאל טקסט פשוט. <p>Hello, name!</p> מציג את המילה name פשוטו כמשמעו, וכנראה לא לזה התכוונת.

זהו רכיב ה-JSX הנפוץ ביותר: הגדירו את הנתונים שלכם כמשתנים, ואז שלבו אותם בסימון באמצעות { }.

אתגר

מתחילים

הרכיב מגדיר את const name = 'Ada' אבל הברכה מציגה את המילה המילולית name.

תקן את הפסקה כך שתשתמש במשתנה: היא צריכה להציג את Hello, Ada!.
אל תשנה את המשתנה עצמו.

נסו בעצמכם

<!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>

בחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה יסודות

1הכירו את React

מה זה React?הרכיב הראשון שלכם כלל ההורה היחיד JSX הוא לא HTML סיכום: הכירו את React

4Props

מהם Props?העברת Props שני Props אותו רכיב, נתונים חדשים ה־Prop‏ Children סיכום: Props

7תנאים ורשימות

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

2ביטויי JSX

סוגריים מסולסליםחשבון בסוגריים מסולסלים סוגריים מסולסלים במאפיינים קריאה לפונקציות ב-JSX סיכום: ביטויי JSX

5מצב ואירועים

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

8פרויקט: כרטיס פרופיל

שלב 1: מבנה הכרטיס שלב 2: כרטיס עם Props שלב 3: כפתור לייק שלב 4: הפעלה וכיבוי של מעקב

3רכיבים

אבני בניין הרכיב השני שלך שימוש חוזר ברכיבים הרכבת דף סיכום: רכיבים

6טפסים ושדות קלט

שדות קלט מבוקרים הצגת הקלט מונה תווים כפתור ניקוי סיכום: טפסים ושדות קלט