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النماذج المدخلات

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