شرح React createAsyncThunk لجلب البيانات من API وعرض حالات التحميل والنجاح والفشل عند بناء تطبيقات React الحقيقية، غالبًا ستحتاج إلى جلب البيانات من API خارجي، مثل عرض المنتجات أو المستخدمين أو الطلبات أو المقالات. وهنا تظهر أهمية React createAsyncThunk داخل Redux Toolkit، لأنها تساعدك على تنظيم عمليات جلب البيانات بطريقة...

شرح React Redux Toolkit لبناء حاسبة السعر والضريبة خطوة بخطوة تعد مكتبة React Redux Toolkit من أفضل الأدوات الحديثة لإدارة الحالة داخل تطبيقات React، خصوصًا عندما يكبر المشروع وتصبح البيانات مشتركة بين أكثر من مكون. بدلًا من تمرير البيانات يدويًا بين المكونات، يمكننا استخدام Redux Toolkit لإنشاء Store مركزي يحتوي...

شرح Lifecycle في React ودورة حياة المكونات مع useEffect في React، كل مكون Component يمر بعدة مراحل منذ لحظة إنشائه وحتى إزالته من الصفحة. هذه المراحل تُعرف باسم Lifecycle أو دورة حياة المكون. فهم دورة حياة المكونات في React من الأمور المهمة جدًا، لأنها تساعدك على معرفة الوقت المناسب لتنفيذ...

شرح استخدام react-router-dom في React مع تطبيق عملي على عرض المنتجات وتفاصيلها عند بناء تطبيق باستخدام React، نحتاج إلى نظام تنقل يسمح بالانتقال بين الصفحات بدون إعادة تحميل الصفحة. هنا تأتي مكتبة react-router-dom التي تعتبر الحل الأساسي لإدارة التنقل داخل تطبيقات React الحديثة. في هذا المقال سنطبق مثال عملي يعرض...

شرح جلب البيانات من API في React باستخدام useEffect و useState مع مثال عملي في تطبيقات React الحديثة، لا يكفي أن نبني واجهات ثابتة فقط، بل نحتاج غالبًا إلى جلب البيانات من مصادر خارجية مثل API ثم عرضها للمستخدم داخل الصفحة. لذلك تُعد مهارة التعامل مع API من أهم المهارات...

ما المقصود بعمليات CRUD في React.js؟ CRUD هو اختصار لأربع عمليات أساسية تُستخدم في أغلب تطبيقات الويب: Create: إضافة بيانات جديدة. Read: قراءة وعرض البيانات. Update: تعديل بيانات موجودة. Delete: حذف بيانات. في React.js يمكن تنفيذ هذه العمليات بسهولة باستخدام useState لإدارة البيانات، وuseEffect لجلب البيانات، وfetch للتعامل مع API....

📌 مقدمة في هذا المقال سنقوم ببناء متجر إلكتروني بسيط باستخدام React، مع الاعتماد على مكتبة react-router-dom لإنشاء نظام تنقل احترافي بين الصفحات. التطبيق سيتكون من: شريط تنقل (Navbar) سلايدر (Slider) قائمة منتجات صفحة تفاصيل لكل منتج الصفحة الأولى: main.jsx import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.bundle.min.js' import { StrictMode } from 'react'...

شرح React Functional vs Class Component مع مثال Counter خطوة بخطوة في عالم تطوير React، تُعد المكونات (Components) من أهم المفاهيم الأساسية التي يجب على كل مطور فهمها جيدًا. ومن بين أكثر المواضيع التي تثير تساؤلات المبتدئين هو الفرق بين React Functional vs Class Component. في هذا المقال سنقوم بشرح...