Menu
Coddy logo textTech
flag Ar iconالعربيةdown icon

المكون الثاني الخاص بك

جزء من قسم الأساسيات في رحلة 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 ببدء render له. المكونات الأخرى هي أدوات مساعدة داخلية.

challenge icon

التحدي

مبتدئ

أنشئ مكونك المستقل الأول.

  1. قم بتعريف مكون يُسمى Header (بحرف H كبير!) فوق App. ويقوم بإرجاع <h1> يحتوي على id="page-title" والنص My Blog.
  2. قم بتقديمه (render) داخل <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>
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس الأساسيات