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

تجميع صفحة

جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 14 من 42.

الصفحة النموذجية هي عبارة عن تركيب (composition): حيث يقوم `App` فقط بترتيب الكتل المسمات:

export default function App() {
    return (
        <div>
            <Title />
            <Content />
            <Footer />
        </div>
    );
}

اقرأ عبارة `return` تلك بصوت عالٍ: إنها تصف الصفحة حرفيًا من الأعلى إلى الأسفل. كل كتلة تخفي ترميزها الخاص، لذا فإن تغيير `Footer` لا يخاطر أبدًا بكسر `Title`. هذا الهيكل هو الطريقة التي ستبني بها كل تطبيق حقيقي من الآن فصاعدًا.

challenge icon

التحدي

سهل

قم بتجميع صفحة من مكونين (components).

  1. عرف Title: عنصر <h1> يحتوي على id="page-title"، والنص Coddy Cooking.
  2. عرف Footer: عنصر <p> يحتوي على id="page-footer"، والنص Made with React.
  3. يقوم 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>
quiz iconاختبر نفسك

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

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