العد بخطوات

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

تأخذ دالة التعيين (setter) أي قيمة جديدة: فأنت لست مقيدًا بـ +1. أضف 5، أو ضاعفها، أو أعد الضبط إلى الصفر:

setPoints(points + 5);
setPoints(points * 2);
setPoints(0);

الأزرار المخصصة لكميات مختلفة هي مجرد معالجات مختلفة على الحالة نفسها:

<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>

التحدي

سهل

تمنح اللعبة 5 points لكل عملة.

أضف حالة points تبدأ من 0 واعرضها في الـ span الذي يحمل id="points".
زر Collect coin (والذي يحمل id="coin") يضيف 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>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

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

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

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