הרכיב השני שלך
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 12 מתוך 42.
בואו נחלץ רכיב. אפשר להגדיר כמה רכיבים שרוצים בקובץ אחד: הקטנים יותר למעלה, ואת App בתחתית:
function Welcome() {
return <p>Glad you're here!</p>;
}
export default function App() {
return (
<div>
<Welcome />
</div>
);
}רק App כולל export default: זהו רכיב הכניסה ש-main.jsx מרנדר. האחרים הם פונקציות עזר פנימיות.
אתגר
מתחיליםצרו את הרכיב העצמאי הראשון שלכם.
- הגדירו רכיב בשם
Header(עם H גדולה!) מעלApp. הוא מחזיר<h1>עםid="page-title"והטקסטMy Blog. - הציגו אותו בתוך ה-
<div>של App באמצעות<Header />.
נסו בעצמכם
<!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: הפעלה וכיבוי של מעקב