فيما يلي تنفيذ خطوة بخطوة لصفحة قائمة المنتجات، مع كود كل مكون متبوعًا بشرح مفصل سطرًا بسطر.

الحل: المهمة 1

فيما يلي تنفيذ الكود لـ "المهمة 1: بناء بنية واجهة المستخدم وتطبيق الأنماط":

شرح الكود

في Header.js :

• الأسطر من 2 إلى 4: قم بتعريف مكون Header عديم الحالة وظيفيًا.

  • السطر الثالث: أعد عنصر

    بفئة CSS header-title . النص هو Our Products .

في ProductItem.js :

• الأسطر من 2 إلى 20: قم بتعريف مكون ProductItem عديم الجنسية.

  • السطر 3: قم بإزالة name price category من الدعائم.

  • الأسطر من 5 إلى 12: يحدد ...