أنت تتقن React بالفعل — هذه نقطة قوّتك. في هذا الكورس، يأخذك كريم خطوةً بخطوة لبناء تطبيق موبايل تجارة إلكترونيّة كامل بـ React Native من الصفر.
// أنت تعرف هذا فعلاً
نفس الـ Hooks. نفس المكوّنات. نفس الأنماط. الشيء الوحيد الذي يتغيّر هو مجموعة محدودة من المكوّنات الأصليّة للمنصّة — View و Text و Image بدلاً من div و p و img.
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>
)
}
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>
)
}
// التطبيق الذي ستبنيه
شاشات بمستوى الإنتاج تغطّي تجربة التسوّق كاملةً: التعارف الأوّلي، المصادقة، اكتشاف المنتجات، السلّة، إتمام الشراء، الدفع، تتبّع الطلب، والإعدادات. وفي النهاية، تكون قد أطلقت تطبيقاً حقيقيّاً تستطيع وضعه في أعمالك.
💡 حرّك المؤشّر على أي شاشة لمعرفة ما ستبنيه💡 اضغط على أي شاشة لمعرفة ما ستبنيه
// ما الذي يميّز هذا الكورس
بالإضافة إلى التدفّق الأساسي للتجارة الإلكترونيّة، ستُنفّذ المميّزات المتقدّمة التي تفصل التطبيقات الهاوية عن التطبيقات الاحترافيّة.
دعم i18n كامل مع RTL — العربيّة والإنجليزيّة وأيّ لغة تحتاجها.
وضع فاتح وداكن وثيمات مخصّصة تستمرّ عبر الجلسات.
حماية الشاشات بـ Expo Router — مع التعامل مع انتهاء التوكنات والأدوار.
بيئات dev و staging و production مع إعداد .env احترافي.
إشعارات حقيقيّة — تعامل كامل مع الواجهة والخلفيّة والضغط.
شارك التطبيق مع المختبرين عبر TestFlight أو Firebase أو التوزيع الداخلي.
قاعدة كود واحدة، منصّتان — دعم أصلي كامل لـ iOS و Android.
تثبيت SSL، تخزين آمن، واستدعاءات API محصّنة — جاهز لاختبار الاختراق.
واجهة تبدو متطابقة على كلّ جهاز — من iPhone SE إلى iPad.
// الأدوات والتقنيّات
كل أداة تُستخدَم في هذا الكورس هي بمستوى الإنتاج وتستخدمها فرق الموبايل في كبرى الشركات اليوم.
ستتكامل مع API إنتاج حقيقي — منتجات حقيقيّة، طلبات حقيقيّة، مدفوعات حقيقيّة. لا بيانات وهميّة.
تعلّم كيفيّة استخدام أدوات الذكاء الاصطناعي مثل ChatGPT و Claude و Copilot للتصحيح بسرعة، وفهم رسائل الأخطاء، وإطلاق المميّزات في جزء بسيط من الوقت.
// نظرة عامة على الكورس
افتح أداة فحص التصميم المباشرة وتجوّل في كل شاشة من تطبيق المتجر الذي ستبنيه — وشاهد كيف تتكوّن كل شاشة من مكوّنات ستكتبها بنفسك.
افتحها من شاشة كبيرة — ليس من الموبايل
// أسئلة شائعة
أكثر ما يُسأل قبل الانضمام — المتطلّبات، لغة الشرح، الدفع، وما ستخرج به في النهاية.
الشرح بالعربي بالكامل. الكود وأسماء المتغيّرات والمكتبات والمصطلحات التقنية تبقى بالإنجليزية كما تكتبها في العمل تماماً — حتى تتعلّم المصطلحات التي ستستخدمها فعلاً داخل فريق.
نعم. كورس رياكت نيتف هذا مُعدّ لمن يكتب React بالفعل — المكوّنات والـ hooks وإدارة الحالة — بالإضافة إلى أساسيات Redux. لن نعيد شرح ما تعرفه، وسنركّز على ما يختلف فعلاً في الموبايل.
لا. تكتب كوداً واحداً بـ React Native ويعمل على iOS وأندرويد معاً. لا تحتاج أي لغة native لأي جزء في الكورس.
تطبيق تجارة إلكترونيّة متكامل من الصفر — عرض المنتجات، صفحة تفاصيل المنتج، السلّة، الدفع، وباك-إند حقيقي. ليس تطبيق مهام بسيط ولا مثالاً تجريبيّاً. التطبيق النهائي صالح لوضعه في معرض أعمالك.
مسجَّل. تشاهده بالوتيرة التي تناسبك وتعيد أي درس وقت ما تشاء، مع وصول مدى الحياة — لا توجد مواعيد محدّدة تلتزم بها.
Expo وTypeScript وRedux Toolkit وReact Query — نفس الحزمة التي تعتمدها فرق الموبايل في بيئة الإنتاج، وليست إعداداً مبسَّطاً للتعليم فقط.
2,999 ج.م مقابل وصول مدى الحياة. تنضمّ إلى مجموعة واتساب ويتولّى كريم ترتيب الدفع معك مباشرةً. المقيمون داخل مصر يمكنهم الدفع عبر المحافظ الإلكترونيّة أو إنستاباي.
نعم. الكود المصدري الكامل للتطبيق مُضمَّن، حتى تقارن عملك بالمشروع النهائي في أي مرحلة.
يتطلّب أساسيّات React + Redux. نتحرّك بسرعة — لا نغطّي الأساسيّات.
ليس لديك أساسيّات React و Redux بعد؟ تعلّم أساسيّات React أوّلاً ←