بناء الصفحة الأساسية وتنسيقها للهاتف والكمبيوتر (HTML & CSS)
قراءة وتعديل عناصر الصفحة الأساسية وضبط المسافات والشبكة المتجاوبة
ماذا ستتعلم وتنجز في هذه الجلسة؟ (اضغط للعرض)▼
- بناء سلة مشتريات تعمل بالكامل مع إضافة وحذف المنتجات وحساب الإجمالي
النشاط 01: بناء سلة المشتريات التفاعلية باستخدام useState
أضف إمكانية النقر على "إضافة للسلة" وتحديث عدد العناصر والإجمالي فورياً
أستخدم React useState لإنشاء مصفوفة عناصر السلة ودوال addToCart و removeFromCart.
المواقع الحديثة لا تعيد تحميل الصفحة عند إضافة منتج للسلة، بل تحدث الواجهة لحظياً لتقديم تجربة تسوق سلسة.
2. خطوات التنفيذ خطوة بخطوة:
أنشئ الحالة: const [cart, setCart] = useState<CartItem[]>([]).
اكتب دالة addToCart التي تضيف المنتج أو تزيد كميته.
احسب إجمالي السعر: cart.reduce((sum, item) => sum + item.price * item.quantity, 0).
سلة مشتريات حية تتفاعل مع نقرات الزائر وتحدث الإجمالي بدقة.
📄 قالب البداية أو الكود المساعد (اضغط للعرض أو النسخ)▼
export function useCart() {
const [items, setItems] = useState([]);
const addItem = (product) => {
setItems((prev) => [...prev, product]);
};
const removeItem = (id) => {
setItems((prev) => prev.filter((item) => item.id !== id));
};
const total = items.reduce((sum, item) => sum + item.price, 0);
return { items, addItem, removeItem, total };
}تلميحات مساعدة (1)▼
- • 💡 في React لا تعدل المصفوفة مباشرة (لا تستخدم push)، بل استخدم مصفوفة جديدة [...cart, newItem].
4. مساحة الحل وتسليم النتيجة عبر واتساب
اكتب إجابتك أو الكود أو رابط عملك في الصندوق أدناه. تُحفظ مسودتك تلقائيًا في متصفحك، وعند الضغط على «إرسال النتيجة عبر واتساب» سيتم حفظ الإجابة في سجل تقدمك وفتح رسالة واتساب جاهزة لإرسالها للمدرب (+90 538 201 50 72).