ملخص: الـ Props
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 21 من 42.
التحدي
سهلملخص الفصل: قائمة صغيرة تم إنشاؤها باستخدام الـ props والـ children.
- اجعل
Itemيستقبل الـ props المسماةnameوpriceويعرض{name}: ${price}داخل عنصر<li>الخاص به. - اجعل
Cardيعرض عنصر<div>معclassName="card"بحيث يعرض الـchildrenالخاصة به. - في App، استخدم
<Card>...</Card>لتغليف الـ<ul id="menu">، وقم بداخلها بعرض عنصرين من Item: الاسمTeaمع سعر3، ثم الاسمCakeمع سعر5(الأسعار كأرقام!).
جرّب بنفسك
<!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>جميع دروس الأساسيات
4الـ Props
ما هي الـ Props؟تمرين تمرير الـ Propsخاصيتان (Two Props)المكون نفسه، بيانات جديدةخاصية Children Propملخص: الـ Props2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة