אותו רכיב, נתונים חדשים
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 19 מתוך 42.
שלבו שימוש חוזר ומאפיינים ותקבלו את התבנית האמיתית: רכיב אחד, שמוצג פעמים רבות עם נתונים שונים.
function Badge({ label }) {
return <span>{label}</span>;
}
<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />שלושה תגים, שלוש תוויות, הגדרה אחת. כל רשימה, תפריט, פיד וגלריה שראית אי פעם ברשת בנויים לפי התבנית הזו (בהמשך אפילו ניצור את העותקים ממערך).
אתגר
קלהציגו את תגי המבצע של החנות.
- גרמו ל־
Badgeלקבל מאפייןlabelולהציג אותו בתוך<span>שלו. - בתוך
<div id="badges">הציגו שני תגים: הראשון עם התוויתNew, ואז עם התוויתSale.
נסו בעצמכם
<!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>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
2ביטויי JSX
סוגריים מסולסליםחשבון בסוגריים מסולסליםסוגריים מסולסלים במאפייניםקריאה לפונקציות ב-JSXסיכום: ביטויי JSX5מצב ואירועים
מהו מצב?מונה לחיצותסופרים בקפיצותשינוי מצב באמצעות Stateמצבים בלתי תלוייםסיכום: מצב ואירועים8פרויקט: כרטיס פרופיל
שלב 1: מבנה הכרטיסשלב 2: כרטיס עם Propsשלב 3: כפתור לייקשלב 4: הפעלה וכיבוי של מעקב