نعم ✅ وبطريقة احترافية جدًا مع Bootstrap 5.3 👌🔥لأننا نستخدم: data-bs-theme=”light”data-bs-theme=”dark” يمكنك تغيير خلفية أي عنصر بناءً على الوضع بسهولة عبر CSS. 🎯 الطريقة الصحيحة (المعتمدة رسميًا) Bootstrap يغير الثيم عبر: <html data-bs-theme=”dark”> إذن يمكننا استهدافه هكذا 👇 🟢 الطريقة…
الآن دخلنا مرحلة تخصيص نظام الألوان بالكامل في Bootstrap 5.3بمستوى احترافي وليس مجرد تعديل عشوائي 👏 أنت تريد: سنقسم الشرح إلى 3 مستويات: 🎯 المستوى 1: فهم كيف يعمل Bootstrap 5.3 داخليًا Bootstrap 5.3 يعتمد على: مثال: كل مكونات Bootstrap…
🎯 الحل الاحترافي الحقيقي 🔥 إنشاء QuickViewModal واحد على مستوى التطبيق كله بدل وضع المودال داخل كل صفحة، نضعه في مكان أعلى: 🧠 كيف نجعل أي كتاب في أي صفحة يفتح نفس المودال؟ لدينا خيارين احترافيين: 🟢 الخيار 1 (أنظف…
1- Slice Code 2- Book Page 3- أزرار التنقل سنرجع الآن ونشرح ربط رقم الصفحة بالـ URL بالتفصيل العميق خطوة خطوة حتى تفهمه معماريًا بالكامل. 🎯 الهدف النهائي نريد أن يصبح الرابط هكذا: وعند: 🔥 هذا هو السلوك الاحترافي. 🧠…
الطريقة الثانية: أولًا: تنفيذ Live Search بدون Debounce (للفهم) التنفيذ الصحيح باستخدام setTimeout
const latestBooks = data?.slice(0, 5); 🧠 أولاً: السطر الكامل 🎯 ماذا نريد أن نفعل؟ نريد: اختيار الكتب التي تنتمي للتصنيف الحالي فقط. 🧩 لنفهم شكل البيانات أولاً شكل الكتب داخل data 🧩 قيمة id من الرابط لو الرابط: فإن: 🧠…
الكتب المتعلقة من خلال هذا الكود: 🧠 أولاً: الرابط الكامل هذا يسمى: ⭐ Strapi REST Query Filters وهو نظام فلترة جاهز داخل Strapi. 🎯 الهدف من هذا الرابط نريد: 👉 كتب لها نفس التصنيف👉 بدون الكتاب الحالي👉 مع جلب الصور…
0️⃣ أوّل شيء: مشكلة صغيرة في الـ import أنت كاتب: في react-hot-toast الصحيح هو: إذن غيّر السطر الأوّل إلى: وباقي الكود يمشي عادي مع toast.error(…). (وبرضه الجملة اللي في التوست تقول “تم جلب البيانات بنجاح” والأفضل تخليها toast.success 😉، راح…
سأقسّم الشرح لمراحل: 1️⃣ تركيب المكتبات المطلوبة لو ما ركّبتها من قبل: 2️⃣ عمل ملف Axios مستقل (اختياري لكنه أفضل تنظيمًا) ملف: api.js الفائدة: لو بكرا غيرت الـ baseURL أو أضفت توكن، تعدّل مكان واحد فقط. 3️⃣ إنشاء Slice للتعامل…
سأقسمه لثلاثة ملفات: 1️⃣ ملف الـ Slice: الجمع والطرح ملف: counterSlice.js شرح سريع لما حدث هنا: 2️⃣ ملف الـ Store وربطه بالـ Slice ملف: store.js ما الذي حصل هنا؟ 3️⃣ ربط الـ store مع تطبيق React عادة في ملف main.jsx…