كورس مباشر · جلسات مع كريم

React Native
لمطوّري React

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

تعرّف على التفاصيل

✓ وصول مدى الحياةمدى الحياة ✓ الكود المصدري متضمَّنالكود المصدري ✓ جلسات مباشرةمباشرة

9:41

سلّتي

حقيبة بيكس ٢٢٩

اللون: بنّي

−1+^$67.00

سمّاعة بوكس ١٣٢

اللون: أسود

−1+^$26.00

المجموع الفرعي^$93.00

الشحن^$6.00

الإجمالي^$99.00

إتمام الشراء

9:41

حقيبة بوكس لينار ١٨٨٣

−3+

★4.8(٣٢٠ تقييم) متوفر

اللون

الوصف

حقيبة ظهر جلدية فاخرة مصمّمة للاستخدام اليومي. حجرة رئيسية واسعة مع جيوب متعدّدة... قراءة المزيد

^$35.25

أضف للسلّة

9:41

مرحباً جوناثان هيّا نتسوّق

الرئيسية الفئات

وصل حديثاً 🔥 عرض الكل

♡

ميراك جيز

ليزا روبر

$195.00

♡

ميريزا كايلز

غازونا ريسيكا

$143.45

الرئيسية

الطلبات

المفضّلة

الحساب

// أنت تعرف هذا فعلاً

مهاراتك في 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.

// الأدوات والتقنيّات

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

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

React Native

إطار العمل الأساسي

Expo CNG

نظام البناء

TypeScript

سلامة الأنواع

JavaScript

اللغة

Redux Toolkit

إدارة الحالة

React Query

حالة الخادم

⚡

API حقيقي

باكيند مباشر

🛒

Real E-commerce Backend

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

🤖

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

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

// المصادر

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

حمّل المنهج، استعرض التصميم، أو استكشف المعاينة المباشرة بكل تفصيل.

// التصميم

تصميم التطبيق

شاشات التطبيق ونظام التصميم (PDF).

تحميل PDF

// المحتوى

منهج الكورس

المنهج الكامل، الوحدات، الجلسات، وخارطة طريق المشروع.

تحميل PDF

// أداة مباشرة

معاينة التصميم المباشرة

استكشف كل شاشة ولون ومكوّن بشكل تفاعلي. افتح على الكمبيوتر لأفضل تجربة.

افتح المعاينة

// لماذا EXPO

إكسبو الحديث. ليس إكسبو الذي تعرفه.

لن تحتاج إلى eject. لن تصطدم بحدود. المعمارية تغيّرت — ومعظم المطوّرين لم يلحقوا بها بعد.

"سأحتاج إلى eject لأكتب كوداً نيتيف"

Config plugins تتعامل مع تغييرات النيتيف — لا حاجة للـ eject أبداً.

"تستخدم فقط ما يوفّره SDK إكسبو"

Expo Modules API يتيح لك كتابة أي موديول Kotlin أو Swift بنفسك.

"ليس جاهزاً لتطبيقات إنتاج حقيقية"

أكثر من 2200 تطبيق يعمل بإكسبو اليوم، منها التطبيقات أدناه ↓

// صيغة الكورس المباشر

تعلّم مباشرةً، مع مدرّبك في الجلسة.

هذا ليس كورساً مسجَّلاً تنساه بعد ثلاثة أيام. كريم يقدّم كل جلسة مباشرةً حتى تستطيع طرح الأسئلة، تصحيح الأخطاء معاً، والتعلّم كمهندس حقيقيّ في فريق حقيقيّ.

🎙️

جلسات مباشرة مع كريماحضر كل وحدة مباشرةً — اطرح أسئلتك في الوقت الفعلي وأنت تبني.

💬

مجتمع ودعمانضمّ إلى المجموعة، شارك تقدّمك، واحصل على المساعدة من الزملاء.

♾️

تسجيلات مدى الحياةفاتتك جلسة؟ كل جلسة مسجَّلة وملك لك إلى الأبد.

🛠️

ابنِ وأنت تتابعكل جلسة تنتهي بشاشة عاملة تستطيع تشغيلها على هاتفك.

احضر مباشرةً

كل وحدة لها ميعاد محدَّد. تدخل، يبدأ كريم الجلسة، وتبني معه مباشرةً — لا يوجد زرّ تشغيل.

بميعاد · مباشر

تبني معه في الوقت نفسه

كريم يبني الشاشة على شاشته، وأنت تبنيها على شاشتك. كل سطر كود، كل قرار، كل refactor — كل ذلك أمامك خطوةً بخطوة.

عمليّ · معاً

وقعت في bug؟ اسأل مباشرةً

علقت في شيء؟ اكتبه في الشات. يتوقّف كريم، يدبّج الـ bug على الشاشة، ويشرح الـ fix — وكل من في الجلسة يتعلّمون معك.

أسئلة · تصحيح

تخرج بشاشة عاملة

كل جلسة تنتهي بشاشة عاملة على هاتفك. بالإضافة إلى الـ recording والـ source code وخطوة واضحة للجلسة التي بعدها.

النتيجة · جاهز

// مدرّبك

كريم نور

قائد فريق الموبايل · Kimz Codes

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

بصفته مؤسّس Kimz Codes، بنى مجتمعاً من المطوّرين العرب يتعلّمون تطوير الموبايل والـ Frontend من خلال محتوى عمليّ بلا حشو.

+15

سنة خبرة

∞

تطبيقات منشورة

مباشر

جلسات

React Nativeلمطوّري React

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

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

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

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

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

توجيه محمي

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

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

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

دعم iOS و Android

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

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

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

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

تصميم التطبيق

منهج الكورس

معاينة التصميم المباشرة

إكسبو الحديث. ليس إكسبو الذي تعرفه.

تعلّم مباشرةً، مع مدرّبك في الجلسة.

احضر مباشرةً

تبني معه في الوقت نفسه

وقعت في bug؟ اسأل مباشرةً

تخرج بشاشة عاملة

احجز مقعدك.

React Native
لمطوّري React