העברת Props

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

בוא נחבר prop מקצה לקצה. שלושה שלבים, תמיד זהים:

// 1. מקבלים אותו
function Greeting({ name }) {
    // 2. משתמשים בו
    return <p>Hello, {name}!</p>;
}

// 3. מעבירים אותו
<Greeting name="Ada" />

מחרוזות מועברות במרכאות. מספרים וביטויים משתמשים בסוגריים מסולסלים, אותו כלל כמו במאפיינים:

<Score points={97} />

אתגר

מתחילים

הרכיב Greeting מתעלם מכל מה שמעבירים אליו.

גרמו ל-Greeting לקבל מאפיין name ולהציג בפסקה שלו את Hello, {name}!.
ב-App, העבירו name="Ada" כדי שהדף יציג את 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טפסים ושדות קלט

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