Menu
Coddy logo textTech
להתחיל ללמוד
flag He iconעבריתdown icon

שלב 2: כרטיס עם Props

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

challenge icon

אתגר

קל

הפוך את הכרטיס לשימוש חוזר.

  1. הגדר את ProfileCard כך שיקבל את המאפיינים name ו-bio, ויציג את אותו מבנה כמו בשלב 1 (div של כרטיס, id="profile-name", id="profile-bio") עם ערכי המאפיינים.
  2. ב-App, הצג ProfileCard אחד עם השם Grace Hopper והביוגרפיה Invented the compiler.

נסו בעצמכם

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

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