الخطوة 3: زر الإعجاب

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

التحدي

متوسط

أضف الإعجابات إلى البطاقة.

أعطِ ProfileCard حالة likes تبدأ من 0.
أضف زراً بالمعرّف id="like" والنص Like يقدم إعجاباً واحداً لكل نقرة.
اعرض العدد في عنصر <span> يحمل المعرّف id="likes".

جرّب بنفسك

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

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