אבני בניין

עד עכשיו, App עשה הכול. אפליקציות React אמיתיות מפצלות את הדף לרכיבים קטנים רבים, והשימוש באחד מהם נראה בדיוק כמו שימוש בתג HTML:

function Header() {
    return <h1>My Blog</h1>;
}

export default function App() {
    return (
        <div>
            <Header />
        </div>
    );
}

כאשר React מזהה את <Header />, הוא קורא לפונקציה שלך ומרנדר את מה שהיא מחזירה. שני כללים:

• שמות של רכיבים מתחילים באות גדולה: כך React מבדיל בין <Header /> (הרכיב שלך) לבין <header> (תגית HTML)
• השתמש בו כמו בתגית שנסגרת בעצמה: <Header />

למה לטרוח? כי דף שמורכב מבלוקים בעלי שמות (<Header />, <Menu />, <Footer />) נקרא כמו תוכן עניינים, ואפשר לעשות שימוש חוזר בכל בלוק בכל מקום.