أنت لديك authorsSlice يجلب الكتّاب، إذن لا تحتاج slice جديد.لكن أيضًا لا نريد فلترة الكتب من booksSlice لأنك تستخدم pagination للكتب، وبالتالي قد لا تكون كل الكتب موجودة في الستور. إذن الطريقة الأفضل والأبسط في حالتك هي: استخدم authorsSlice لجلب…
الآن سنبني Newsletter System احترافي يربط: React (Frontend) → Strapi (Backend) → Database وسأشرح السيناريو الكامل خطوة خطوة. 🧠 أولًا: الفكرة العامة عندما يكتب المستخدم بريده: يحدث الآتي: 🏗 الخطوة 1: إنشاء Collection في Strapi اذهب إلى: أنشئ Collection باسم:…
سنقوم الآن ببناء Banner / Hero Slider System احترافي 100%بنية صحيحة في Strapi + كود React كامل + Redux + Swiperوقابل للتوسع مستقبلاً. سنبنيه وكأننا نبني متجر Production حقيقي 👌 🏗 أولًا: إعداد Strapi بطريقة احترافية ✅ أنشئ Collection Type…
سننشئ: سأبنيها لك معماريًا بشكل صحيح. 🎯 أولًا: ما هو السيناريو الصحيح للفلترة؟ عند تغيير أي فلتر: مثال URL احترافي: 🏗 الهيكل العام للصفحة 🟢 الخطوة 1: Sidebar Component 📁 SidebarFilters.jsx 🧠 ماذا يحدث هنا؟ 🔥 هذا احترافي جدًا. 🟢…
نعم ✅ وبطريقة احترافية جدًا مع 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…
الآن سنبني نظام Dark / Light Mode احترافي 100% باستخدام⚡ Bootstrap 5.3 الرسمي (وليس CSS عشوائي). Bootstrap 5.3 يقدم دعم رسمي عبر: ونحن سنبني نظام احترافي فيه: 🎯 الفكرة المعمارية الصحيحة نحتاج: ⚠️ لا نستخدم Redux لهذا الغرض. 🏗 الخطوة…
🎯 الحل الاحترافي الحقيقي 🔥 إنشاء QuickViewModal واحد على مستوى التطبيق كله بدل وضع المودال داخل كل صفحة، نضعه في مكان أعلى: 🧠 كيف نجعل أي كتاب في أي صفحة يفتح نفس المودال؟ لدينا خيارين احترافيين: 🟢 الخيار 1 (أنظف…
1- Slice Code 2- Book Page 3- أزرار التنقل سنرجع الآن ونشرح ربط رقم الصفحة بالـ URL بالتفصيل العميق خطوة خطوة حتى تفهمه معماريًا بالكامل. 🎯 الهدف النهائي نريد أن يصبح الرابط هكذا: وعند: 🔥 هذا هو السلوك الاحترافي. 🧠…
الطريقة الثانية: أولًا: تنفيذ Live Search بدون Debounce (للفهم) التنفيذ الصحيح باستخدام setTimeout