Menu

Tech

להתחיל ללמוד

עברית

סיכום: תנאים ורשימות

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

אתגר

בינוני

סיכום הפרק: בניית לוח משימות מתוך הנתונים, תוך שימוש בכל מה שנלמד בפרק הזה.

הרכיב מגדיר מערך tasks. בתוך <ul id="done-list">, יש לעבד פריט <li> אחד עבור כל משימה שהסטטוס שלה הוא הושלמה: תחילה filter, ואז map.
כל <li> מציג את text של המשימה ומשתמש ב-id שלה בתור key.
מעל הרשימה, השתמשו ב-&& כדי להציג <span> עם id="badge" ובו הכיתוב 2 done (בנו את המספר מתוך ה-length של המערך המסונן!), אבל רק כאשר לפחות משימה אחת הושלמה.

נסו בעצמכם

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

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