סופרים בקפיצות

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

ה-setter מקבל כל ערך חדש: אין מגבלה ל-+1. הוסיפו 5, הכפילו, אפסו:

setPoints(points + 5);
setPoints(points * 2);
setPoints(0);

כפתורים לכמויות שונות הם פשוט מטפלים שונים באותו מצב:

<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>

אתגר

קל

משחק מעניק 5 נקודות לכל מטבע.

הוסף מצב points שמתחיל ב־0 והצג אותו בתוך רכיב ה־span עם id="points".
הכפתור Collect coin (id="coin") מוסיף 5 בכל לחיצה.

נסו בעצמכם

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

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