כלל ההורה היחיד

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

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

return (
    <div>
        <h1>My Page</h1>
        <p>Welcome!</p>
    </div>
);

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

// BROKEN: שני אלמנטים ברמה העליונה
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

הפתרון הרגיל הוא לעטוף הכול ב־<div>. צפו בתצוגה המקדימה: אם תפרו את הכלל, שגיאת הבנייה תראה לכם בדיוק איפה.

אתגר

מתחילים

בנו כותרת קטנה לעמוד: שני אלמנטים תחת הורה אחד.

השאירו את ה־<div> החיצוני.
הוסיפו בתוכו <h1> עם id="heading" והטקסט My First App.
מתחת לכותרת הוסיפו <p> עם id="tagline" והטקסט Built with React.

נסו בעצמכם

<!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טפסים ושדות קלט

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