دمج التعديل مع الاضافة
سنبني: وسأشرح: 🔥 🎯 أولًا: لماذا الدمج أصلًا؟ قبل الدمج كان عندك: وكل واحد يحتوي: ❌ 🎯 الحل الاحترافي إنشاء: اسمه: 🧠 المعمارية النهائية 🚀 الملف الأول 📄 StudentForm.jsx 🎯 وظيفة هذا الملف هذا هو: الذي: 📄 components 🧠 ماذا…
التصنيف react-js
تعديل بيانات الطالب
الآن سنبني: بفورم مستقل كامل مثل صفحة الإضافة تمامًا. 🧠 ما الفرق بين الإضافة والتعديل؟ الإضافة التعديل حقول فارغة حقول ممتلئة addStudent updateStudent reset() reset(studentData) لا يوجد useParams يوجد useParams 🚀 الكود الكامل الاحترافي EditStudent.jsx الراوت الخاص بالتعديل 🚀 زر…
صفحة إضافة الطالب
authorsSlice Books
أنت لديك authorsSlice يجلب الكتّاب، إذن لا تحتاج slice جديد.لكن أيضًا لا نريد فلترة الكتب من booksSlice لأنك تستخدم pagination للكتب، وبالتالي قد لا تكون كل الكتب موجودة في الستور. إذن الطريقة الأفضل والأبسط في حالتك هي: استخدم authorsSlice لجلب…
Newsletter Post Request
الآن سنبني Newsletter System احترافي يربط: React (Frontend) → Strapi (Backend) → Database وسأشرح السيناريو الكامل خطوة خطوة. 🧠 أولًا: الفكرة العامة عندما يكتب المستخدم بريده: يحدث الآتي: 🏗 الخطوة 1: إنشاء Collection في Strapi اذهب إلى: أنشئ Collection باسم:…
Hero Slider
سنقوم الآن ببناء 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”> إذن يمكننا استهدافه هكذا 👇 🟢 الطريقة…
Custom Colors in Bootstrap
الآن دخلنا مرحلة تخصيص نظام الألوان بالكامل في Bootstrap 5.3بمستوى احترافي وليس مجرد تعديل عشوائي 👏 أنت تريد: سنقسم الشرح إلى 3 مستويات: 🎯 المستوى 1: فهم كيف يعمل Bootstrap 5.3 داخليًا Bootstrap 5.3 يعتمد على: مثال: كل مكونات Bootstrap…
Dark Mode
الآن سنبني نظام Dark / Light Mode احترافي 100% باستخدام⚡ Bootstrap 5.3 الرسمي (وليس CSS عشوائي). Bootstrap 5.3 يقدم دعم رسمي عبر: ونحن سنبني نظام احترافي فيه: 🎯 الفكرة المعمارية الصحيحة نحتاج: ⚠️ لا نستخدم Redux لهذا الغرض. 🏗 الخطوة…