Menu
Coddy logo textTech
ابدأ التعلم
flag Ar iconالعربيةdown icon

الخطوة 2: بطاقة مع Props

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

challenge icon

التحدي

سهل

اجعل بطاقة card قابلة لإعادة الاستخدام.

  1. قم بتعريف ProfileCard بحيث يستقبل الخصائص name و bio، ويقوم بعرض نفس الهيكل من الخطوة 1 (عنصر div للبطاقة card، مع id="profile-name" و id="profile-bio") باستخدام قيم الخصائص (props).
  2. في App، قم بعرض ProfileCard واحد بالاسم Grace Hopper والسيرة الذاتية Invented the compiler.

جرّب بنفسك

<!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>

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

1التعرف على React

ما هو React؟مكونك الأولقاعدة الأب الواحدJSX ليس HTMLملخص: التعرف على React

4الـ Props

ما هي الـ Props؟تمرين تمرير الـ Propsخاصيتان (Two Props)المكون نفسه، بيانات جديدةخاصية Children Propملخص: الـ Props

7الشروط والمصفوفات

العرض الشرطي الثلاثي (Ternary Rendering)العرض باستخدام &&عرض قائمةأهمية المفاتيح (Keys)التصفية ثم التعيين (Filter, Then Map)ملخص: الشروط والمصفوفات

2تعبيرات JSX

الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX

5الحالة والأحداث

ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث

8مشروع: بطاقة الملف الشخصي

الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة

3المكونات

لبنات البناءالمكون الثاني الخاص بكإعادة استخدام المكوناتتجميع صفحةملخص: المكونات

6النماذج المدخلات

المدخلات المدارةتكرار المدخلاتعداد الحروفزر المسحملخص: النماذج والمدخلات