الرئيسية لمطوّري React التطبيق المميّزات التقنيّات نظرة عامة أسئلة شائعة احصل على الكورس
كورس متكامل · متاح الآن

React Native
لمطوّري React

أنت تتقن React بالفعل — هذه نقطة قوّتك. في هذا الكورس، يأخذك كريم خطوةً بخطوة لبناء تطبيق موبايل تجارة إلكترونيّة كامل بـ React Native من الصفر.

✓ وصول مدى الحياةمدى الحياة ✓ الكود المصدري متضمَّنالكود المصدري ✓ شاهد في أي وقتأي وقت
تطبيق الكورس — شاشات السلّة وتفاصيل المنتج والرئيسية من تطبيق التجارة الإلكترونيّة الذي تبنيه

مهاراتك في React؟ تعمل هنا أيضاً.

نفس الـ Hooks. نفس المكوّنات. نفس الأنماط. الشيء الوحيد الذي يتغيّر هو مجموعة محدودة من المكوّنات الأصليّة للمنصّة — View و Text و Image بدلاً من div و p و img.

👀 يبدو مألوفاً؟ — لأنّه كذلك بالفعل. نفس المكوّن جنباً إلى جنب، للويب وللموبايل. — ينبغي ذلك. اضغط في الأسفل لرؤية نسخة React Native.
⚛ React (Web)
import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useQuery } from '@tanstack/react-query'
import './ProductCard.css'

function ProductCard() {
  const [added, setAdded] = useState(false)
  useEffect(() => { fetchProduct() }, [])

  return (
    <div className="card">
      <img src={img} />
      <p className="name">{name}</p>
      <button onClick={add}>
        Add to Cart
      </button>
    </div>
  )
}
📱 React Native
import { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useQuery } from '@tanstack/react-query'
import { StyleSheet } from 'react-native'

function ProductCard() {
  const [added, setAdded] = useState(false)
  useEffect(() => { fetchProduct() }, [])

  return (
    <View style={s.card}>
      <Image source={img} />
      <Text style={s.name}>{name}</Text>
      <Pressable onPress={add}>
        Add to Cart
      </Pressable>
    </View>
  )
}
نفس المنطق. نفس الـ Hooks. نفس طبقة البيانات. فقط المكوّنات الأصليّة تتغيّر.

تطبيق تجارة إلكترونيّة كامل — ليس مشروعاً تجريبيّاً.

شاشات بمستوى الإنتاج تغطّي تجربة التسوّق كاملةً: التعارف الأوّلي، المصادقة، اكتشاف المنتجات، السلّة، إتمام الشراء، الدفع، تتبّع الطلب، والإعدادات. وفي النهاية، تكون قد أطلقت تطبيقاً حقيقيّاً تستطيع وضعه في أعمالك.

💡 حرّك المؤشّر على أي شاشة لمعرفة ما ستبنيه💡 اضغط على أي شاشة لمعرفة ما ستبنيه

👋
التعارف الأوّلي
🔐
المصادقة وOTP
🏠
الصفحة الرئيسيّة
🔍
الاستكشاف والبحث
🛍️
تفاصيل المنتج
❤️
المفضّلة وقائمة الرغبات
🛒
السلّة وإتمام الشراء
📍
العناوين والموقع
📦
تتبّع الطلب
👤
الملف الشخصي والإعدادات
🔔
الإشعارات
iOS + Android RTL + LTR

مميّزات عالم حقيقي. ليس مجرّد تطبيق بسيط.

بالإضافة إلى التدفّق الأساسي للتجارة الإلكترونيّة، ستُنفّذ المميّزات المتقدّمة التي تفصل التطبيقات الهاوية عن التطبيقات الاحترافيّة.

🌍

تطبيق متعدّد اللغات

دعم i18n كامل مع RTL — العربيّة والإنجليزيّة وأيّ لغة تحتاجها.

🎨

دعم متعدّد الثيمات

وضع فاتح وداكن وثيمات مخصّصة تستمرّ عبر الجلسات.

🔒

توجيه محمي

حماية الشاشات بـ Expo Router — مع التعامل مع انتهاء التوكنات والأدوار.

⚙️

إعدادات بيئات متعدّدة

بيئات dev و staging و production مع إعداد .env احترافي.

🔔

الإشعارات الفوريّة

إشعارات حقيقيّة — تعامل كامل مع الواجهة والخلفيّة والضغط.

🚀

النشر للاختبار

شارك التطبيق مع المختبرين عبر TestFlight أو Firebase أو التوزيع الداخلي.

📱

دعم iOS و Android

قاعدة كود واحدة، منصّتان — دعم أصلي كامل لـ iOS و Android.

🛡️

الأمان وجاهز لاختبار الاختراق

تثبيت SSL، تخزين آمن، واستدعاءات API محصّنة — جاهز لاختبار الاختراق.

📐

دقيق على كلّ شاشة

واجهة تبدو متطابقة على كلّ جهاز — من iPhone SE إلى iPad.

حزمة الموبايل المحترفة.

كل أداة تُستخدَم في هذا الكورس هي بمستوى الإنتاج وتستخدمها فرق الموبايل في كبرى الشركات اليوم.

RN
React Native
إطار العمل الأساسي
Ex
Expo CNG
نظام البناء
TS
TypeScript
سلامة الأنواع
JS
JavaScript
اللغة
RT
Redux Toolkit
إدارة الحالة
RQ
React Query
حالة الخادم
⚡
API حقيقي
باكيند مباشر
🛒
Real E-commerce Backend

ستتكامل مع API إنتاج حقيقي — منتجات حقيقيّة، طلبات حقيقيّة، مدفوعات حقيقيّة. لا بيانات وهميّة.

🤖
الذكاء الاصطناعي للتصحيح وحلّ المشاكل

تعلّم كيفيّة استخدام أدوات الذكاء الاصطناعي مثل ChatGPT و Claude و Copilot للتصحيح بسرعة، وفهم رسائل الأخطاء، وإطلاق المميّزات في جزء بسيط من الوقت.

شاهد التطبيق قبل أن تبنيه.

افتح أداة فحص التصميم المباشرة وتجوّل في كل شاشة من تطبيق المتجر الذي ستبنيه — وشاهد كيف تتكوّن كل شاشة من مكوّنات ستكتبها بنفسك.

  • كل شاشات التطبيق الحقيقي
  • المكوّنات التي تُبنى منها كل شاشة
  • الألوان والمسافات والخطوط مباشرة
افتح الأداة

افتحها من شاشة كبيرة — ليس من الموبايل

الشاشة الرئيسية لتطبيق المتجر وكل مكوّن فيها محاط بإطار — الهيدر، وشريط البحث، والتصنيفات، والبانر، وبطاقة المنتج، وشريط التبويب

قبل أن تشترك.

أكثر ما يُسأل قبل الانضمام — المتطلّبات، لغة الشرح، الدفع، وما ستخرج به في النهاية.

هل الكورس بالعربي؟

الشرح بالعربي بالكامل. الكود وأسماء المتغيّرات والمكتبات والمصطلحات التقنية تبقى بالإنجليزية كما تكتبها في العمل تماماً — حتى تتعلّم المصطلحات التي ستستخدمها فعلاً داخل فريق.

هل أحتاج خبرة في React قبل البدء؟

نعم. كورس رياكت نيتف هذا مُعدّ لمن يكتب React بالفعل — المكوّنات والـ hooks وإدارة الحالة — بالإضافة إلى أساسيات Redux. لن نعيد شرح ما تعرفه، وسنركّز على ما يختلف فعلاً في الموبايل.

هل أحتاج تعلّم Swift أو Kotlin؟

لا. تكتب كوداً واحداً بـ React Native ويعمل على iOS وأندرويد معاً. لا تحتاج أي لغة native لأي جزء في الكورس.

ماذا سأبني بالضبط؟

تطبيق تجارة إلكترونيّة متكامل من الصفر — عرض المنتجات، صفحة تفاصيل المنتج، السلّة، الدفع، وباك-إند حقيقي. ليس تطبيق مهام بسيط ولا مثالاً تجريبيّاً. التطبيق النهائي صالح لوضعه في معرض أعمالك.

هل الكورس مباشر أم مسجَّل؟

مسجَّل. تشاهده بالوتيرة التي تناسبك وتعيد أي درس وقت ما تشاء، مع وصول مدى الحياة — لا توجد مواعيد محدّدة تلتزم بها.

ما التقنيات المستخدمة في الكورس؟

Expo وTypeScript وRedux Toolkit وReact Query — نفس الحزمة التي تعتمدها فرق الموبايل في بيئة الإنتاج، وليست إعداداً مبسَّطاً للتعليم فقط.

كم سعر الكورس وكيف أدفع؟

2,999 ج.م مقابل وصول مدى الحياة. تنضمّ إلى مجموعة واتساب ويتولّى كريم ترتيب الدفع معك مباشرةً. المقيمون داخل مصر يمكنهم الدفع عبر المحافظ الإلكترونيّة أو إنستاباي.

هل أحصل على الكود المصدري؟

نعم. الكود المصدري الكامل للتطبيق مُضمَّن، حتى تقارن عملك بالمشروع النهائي في أي مرحلة.

عرض لفترة محدودة · وصول مدى الحياة

احصل على الكورس.

وصول مدى الحياة مشروع إنتاج حقيقي iOS + Android شهادة إتمام
احصل على الكورس · 2,999 ج.م