مشروع عملي: بناء متجر إلكتروني بسيط في React

تخيّل أنك تريد بيع منتج واحد فقط أونلاين. تحتاج صفحة تعرض المنتج، زر إضافة للسلة، وإجمالي سعر واضح. هنا يأتي دور هذا المشروع: متجر إلكتروني بسيط يبني الفكرة خطوة بخطوة داخل React.

الهدف ليس بناء متجر ضخم، بل تعلم أساسيات التطبيق الواقعي: عرض بيانات، تفاعل المستخدم، إدارة السلة، وحساب السعر النهائي.

ماذا سنبني؟

• قائمة منتجات بسيطة.
• زر لإضافة المنتج إلى السلة.
• سلة تعرض العناصر المختارة.
• إجمالي سعر محسوب تلقائيًا.

الخطوة 1: بيانات المنتجات

const المنتجات = [
  { id: 1, name: "سماعات", price: 299 },
  { id: 2, name: "لوحة مفاتيح", price: 199 },
  { id: 3, name: "ماوس", price: 99 },
];

الخطوة 2: عرض المنتجات

function ProductList({ onAdd }) {
  return (
    <div>
      {المنتجات.map((p) => (
        <div key={p.id} className="card">
          <h3>{p.name}</h3>
          <p>{p.price} درهم</p>
          <button onClick={() => onAdd(p)}>أضف للسلة</button>
        </div>
      ))}
    </div>
  );
}

الخطوة 3: إدارة السلة

import { useState } from "react";

function App() {
  const [cart, setCart] = useState([]);

  function addToCart(product) {
    setCart((prev) => {
      const existing = prev.find((i) => i.id === product.id);
      if (existing) {
        return prev.map((i) =>
          i.id === product.id ? { ...i, qty: i.qty + 1 } : i
        );
      }
      return [...prev, { ...product, qty: 1 }];
    });
  }

  return (
    <div>
      <h1>متجر بسيط</h1>
      <ProductList onAdd={addToCart} />
    </div>
  );
}

الخطوة 4: عرض السلة

function Cart({ cart }) {
  return (
    <ul>
      {cart.map((item) => (
        <li key={item.id}>
          {item.name} × {item.qty}
        </li>
      ))}
    </ul>
  );
}

الخطوة 5: حساب الإجمالي

const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);

<p>الإجمالي: {total} درهم</p>

تحسين اختياري: إزالة عنصر من السلة

function removeFromCart(id) {
  setCart((prev) => prev.filter((i) => i.id !== id));
}

أفضل الممارسات

• قسّم المشروع إلى مكوّنات: ProductList, Cart, ProductCard.
• لا تضع منطق السلة داخل كل مكوّن، اجعله في App.
• ابدأ ببيانات ثابتة ثم اربط API لاحقًا.

الأسئلة الشائعة — FAQ

ما هدف مشروع المتجر الإلكتروني؟

تطبيق مفاهيم React على مشروع واقعي مع منتجات وسلة.

هل نحتاج API حقيقي؟

لا، بيانات ثابتة تكفي كبداية ويمكن ربط API لاحقًا.

كيف نحسب إجمالي السعر؟

باستخدام reduce لجمع الأسعار حسب الكميات.

هل يمكن إضافة فلترة أو بحث؟

نعم، بإضافة state للبحث ثم تصفية المنتجات.

كيف أطور المشروع لاحقًا؟

أضف صفحة منتج، تسجيل دخول، وربط بوابة دفع.