لبنات البناء

حتى الآن كان App يقوم بكل شيء. تطبيق React الحقيقي يقسم الصفحة إلى العديد من المكونات الصغيرة، واستخدام أحدها يبدو تماماً مثل استخدام وسم HTML:

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

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

عندما يرى React العنصر <Header />، فإنه يقوم باستدعاء الـ function الخاصة بك ويعرض كل ما تقوم بإرجاعه. هناك قاعدتان:

• تبدأ أسماء المكونات (Components) بـ حرف كبير (Capital Letter): بهذه الطريقة يميز React بين <Header /> (المكون الخاص بك) وبين <header> (وسم HTML)
• استخدمه كعنصر ذاتي الإغلاق: <Header />

لماذا نقوم بذلك؟ لأن الصفحة المكونة من كتل مسماة (<Header />، <Menu />، <Footer />) تُقرأ مثل جدول المحتويات، وكل كتلة يمكن إعادة استخدامها في أي مكان.