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…
✅ أولاً: ما هي Redux؟ Redux هي مكتبة لإدارة الحالة (State Management) في تطبيقات JavaScript، خصوصًا React.تساعدك في حفظ البيانات المشتركة بين أجزاء التطبيق ومزامنتها بطريقة منظمة. ✔ ما الذي تقدمه Redux؟ ❗ مشكلة Redux التقليدي ✅ ثانيًا: ما هي…
ما هو HTTP؟ HTTP اختصار لـ: HyperText Transfer Protocolبروتوكول نقل النص الفائق ببساطة: هو القواعد/اللغة اللي يتفاهم بها المتصفح أو الفرونت إند (العميل) مع السيرفر عبر الإنترنت. كل مرة: 1️⃣ من يتكلم مع من؟ في HTTP عندنا طرفين: العميل يرسل…
أولاً: ما هي الـ API؟ API اختصار لـ:Application Programming Interfaceواجهة برمجية للتواصل بين “شيئين”: فـ API كلمة عامّة جدًا، مش مرتبطة بالويب فقط. أمثلة بسيطة: إذًا: API = أي طريقة منظمة تخليك تتواصل مع نظام/كود آخر. ثانياً: ما هي REST…
1️⃣ ما هي POST ومتى نستخدمها؟ HTTP Method: POST نستخدمها لما نحب: الفرق عن GET: 2️⃣ شكل axios.post الأساسي الصيغة العامة: مثال بسيط: هنا: 3️⃣ أنواع البيانات اللي نرسلها مع POST 🔹 (1) JSON عادي (الأكثر استخدامًا) Axios في المتصفح…
1️⃣ ما هي GET؟ في بروتوكول HTTP فيه عدّة طرق (methods):GET, POST, PUT, DELETE, … الخ. مع Axios نستخدم: 2️⃣ الشكل الأساسي لـ axios.get الصيغة العامة: أو مع async/await: البرامترين: 3️⃣ أهم الخيارات داخل config مع GET 🔹 (1) params…
أولاً: ما هي Axios؟ Axios هي مكتبة (package) لجافاسكربت نستخدمها عشان نرسل طلبات HTTP مثل: يعني نفس وظيفة fetch، لكن تعطيك مميزات زيادة وتسهّل التعامل مع الـ APIs. تثبيتها (لو تستخدم React مع npm): أو: ثانياً: أهم مميزات Axios (للمبتدئين)…