المكون الثاني الخاص بك
جزء من قسم الأساسيات في رحلة 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 له. المكونات الأخرى هي أدوات مساعدة داخلية.
التحدي
مبتدئأنشئ مكونك المستقل الأول.
- قم بتعريف مكون يُسمى
Header(بحرف H كبير!) فوقApp. ويقوم بإرجاع<h1>يحتوي علىid="page-title"والنصMy Blog. - قم بتقديمه (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>يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة