رياكت

رياكت

بناء متجر إلكتروني باستخدام React و Redux Toolkit خطوة بخطوة

بناء متجر إلكتروني باستخدام React و Redux Toolkit خطوة بخطوة

بناء متجر إلكتروني باستخدام React و Redux Toolkit خطوة بخطوة اصنع متجر إلكتروني كامل بـ React و Redux Toolkit مع سلة مشتريات احترافية في هذا المقال ستتعلم طريقة إنشاء متجر إلكتروني بسيط باستخدام React و Redux Toolkit و React Router و Bootstrap. سنقوم بعرض المنتجات داخل Cards، وإنشاء صفحة تفاصيل...

شرح React createAsyncThunk لجلب البيانات من API وعرض حالات التحميل والنجاح والفشل

شرح React createAsyncThunk لجلب البيانات من API وعرض حالات التحميل والنجاح والفشل

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

شرح React Redux Toolkit لبناء حاسبة السعر والضريبة خطوة بخطوة

شرح React Redux Toolkit لبناء حاسبة السعر والضريبة خطوة بخطوة

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

شرح Lifecycle في React ودورة حياة المكونات باستخدام useEffect

شرح Lifecycle في React ودورة حياة المكونات باستخدام useEffect

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

شرح استخدام react-router-dom في React مع تطبيق عملي على عرض المنتجات وتفاصيلها

شرح استخدام react-router-dom في React مع تطبيق عملي على عرض المنتجات وتفاصيلها

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

شرح جلب البيانات من API في React باستخدام useEffect و useState

شرح جلب البيانات من API في React باستخدام useEffect و useState

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

شرح CRUD في React.js عمليًا: عرض المنتجات، الحذف، الإضافة والتعديل

شرح CRUD في React.js عمليًا: عرض المنتجات، الحذف، الإضافة والتعديل

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

كيفية بناء متجر إلكتروني باستخدام React و react-router-dom خطوة بخطوة

كيفية بناء متجر إلكتروني باستخدام React و react-router-dom خطوة بخطوة

📌 مقدمة في هذا المقال سنقوم ببناء متجر إلكتروني بسيط باستخدام 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'...

من نحن

يسعى موقعنا لاثراء المحتوى العربي بالدروس البرمجيه ومساعده المبرمجين في انجاز اعمالهم واضافه بعض الحلول البرمجيه التي قد تواجه المبرمج يحتوي الموقع على عدد كبير من لغات البرمجه ومجالات مختلفه يسعى الموقع الي تحقيق أقصى استفادة من التكنولوجيا الحديثه في المجالات المتنوعه

القائمة البريدية

انضم إلى قائمتنا البريدية وكن أول من يحصل على أحدث الدروس، المقالات، والعروض الحصرية في عالم البرمجة! 🚀 لا تفوت فرصة تطوير مهاراتك والبقاء على اطلاع دائم بأحدث التقنيات. اشترك الآن وابدأ رحلتك نحو الاحتراف! 💡🔥

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع