הרכבת דף
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 14 מתוך 42.
עמוד טיפוסי הוא הרכבה: App רק מסדרת בלוקים בעלי שמות:
export default function App() {
return (
<div>
<Title />
<Content />
<Footer />
</div>
);
}קראו את הצהרת ההחזרה בקול רם: היא מתארת את הדף, פשוטו כמשמעו, מלמעלה למטה. כל בלוק מסתיר את הסימון שלו, כך ששינוי הכותרת התחתונה לעולם לא יסכן את הכותרת. כך תבנו כל אפליקציה אמיתית מעכשיו והלאה.
אתגר
קלהרכב דף משני רכיבים.
- הגדר את
Title: רכיב<h1>עםid="page-title", והטקסטCoddy Cooking. - הגדר את
Footer: רכיב<p>עםid="page-footer", והטקסטMade with React. - App מציג תחילה את
<Title />, ואז את<Footer />.
נסו בעצמכם
<!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: הפעלה וכיבוי של מעקב