تجميع صفحة
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 14 من 42.
الصفحة النموذجية هي عبارة عن تركيب (composition): حيث يقوم `App` فقط بترتيب الكتل المسمات:
export default function App() {
return (
<div>
<Title />
<Content />
<Footer />
</div>
);
}اقرأ عبارة `return` تلك بصوت عالٍ: إنها تصف الصفحة حرفيًا من الأعلى إلى الأسفل. كل كتلة تخفي ترميزها الخاص، لذا فإن تغيير `Footer` لا يخاطر أبدًا بكسر `Title`. هذا الهيكل هو الطريقة التي ستبني بها كل تطبيق حقيقي من الآن فصاعدًا.
التحدي
سهلقم بتجميع صفحة من مكونين (components).
- عرف
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: تبديل المتابعة