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

ملخص: تعبيرات JSX

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

challenge icon

التحدي

سهل

ملخص الفصل: ملخص طلب مصغر، يتم توصيره بالكامل باستخدام JavaScript. يحدد ملف App.jsx بالفعل item، و price، و quantity، ودالة مساعدة shout.

  1. اجعل عنصر <h1> ذو المعرف id="header" يعرض نتيجة استدعاء shout(item): يجب أن يعرض COFFEE!.
  2. اجعل الفقرة ذات المعرف id="count" تعرض 3 cups، باستخدام المتغير quantity، وليس الرقم المباشر.
  3. اجعل الفقرة ذات المعرف id="total" تعرض Total: 12. قم بحساب الرقم من price و quantity باستخدام *، ولا تقم بكتابة 12 مباشرة.

جرّب بنفسك

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

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