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