تعلّم React - دورة تفاعلية مجانية
أتقن React بكتابة مكوّنات حقيقية من الدرس الأول: JSX وprops والحالة والأحداث، ثم واصل إلى Next.js - التوجيه عبر نظام الملفات، والتخطيطات، ومكوّنات الخادم، وجلب البيانات، وserver actions. كل شيء يعمل في متصفحك مع تلميحات ذكاء اصطناعي عندما تتعثر، وتحصل على شهادة مجانية عند الإنهاء.
3,235+ من الـ codders مسجلون
89 درسًا78 تحديات164 أسئلة الاختبار
- مناسب للمبتدئين
مساعدة برمجية بالذكاء الاصطناعي
دروس تفاعلية عملية
تعليق صوتي في كل درس
اختبارات لقياس معرفتك
شهادة إتمام مجانية
المنهج
قسم 1
الأساسيات
ابدأ القسمابدأتعلم كيفية بناء واجهات المستخدم باستخدام React: المكونات (components)، وJSX، وprops، والحالة (state)، والأحداث (events)، بدءًا من أول مكون لك وحتى تطبيق صغير يعمل بفعالية.التعرف على React
5 درسًا513تعبيرات JSX
5 درسًا58المكونات
5 درسًا48الـ Props
6 درسًا510الحالة والأحداث
6 درسًا59النماذج المدخلات
5 درسًا47الشروط والمصفوفات
6 درسًا510مشروع: بطاقة الملف الشخصي
4 درسًا4قسم 2
أساسيات Next.jsصفحة مخصصة
ابدأ القسمابدأانتقل من مكونات React إلى تطبيق حقيقي: التوجيه عبر نظام الملفات (file-system routing)، والتخطيطات (layouts)، ومكونات الخادم والعميل (server and client components)، وجلب البيانات (data fetching)، وإجراءات الخادم (server actions)، ومشروع Next.js مكتمل.لماذا Next.js
4 درسًا39التوجيه والروابط
6 درسًا516التخطيطات والبيانات الوصفية
6 درسًا515الخادم والعميل (Server & Client)
6 درسًا515البيانات على الخادم
6 درسًا516إجراءات الخادم (Server Actions)
5 درسًا413التنقل من جانب العميل
5 درسًا515مشروع: كودي يأكل (Coddy Eats)
9 درسًا9
تعلّم بالممارسة
اكتب أكواداً حقيقية، واستعلم من قواعد البيانات، وأنشئ مواقع ويب، وأتقن أوامر الذكاء الاصطناعي. دروسنا التفاعلية تغطي كل المهارات التي يحتاجها المطورون المعاصرون.
ابنِ سلسلتك
حافظ على الاستمرارية وشاهد تقدمك ينمو! تابع عادة البرمجة اليومية، واحمِ سلسلتك بأيام التجميد، واكسب مكافآت لحضورك كل يوم.
12 أيام متتالية
عُد غداً للحفاظ على سلسلتك!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
ضعف أو لا شيء
اليوم 5 من 7
تجميد السلسلة
2 left
برمج في أي مكان
خذ رحلة البرمجة معك أينما ذهبت! لا إعداد، لا تنزيلات: فقط افتح وابدأ البرمجة. متوفر على iOS وAndroid والويب بتقييم 4.9 نجوم.
لست وحدك
تنافس على لوحات المتصدرين العالمية، وادعُ أصدقاءك لكسب المكافآت، واحتفلوا بإنجازات بعضكم. البرمجة أفضل مع الأصدقاء!
1
2
3
منطقة الترقيةكل طريقة للتعلّم
اقرأ، استمع، اختبر نفسك، اسأل الذكاء الاصطناعي، أو ابحث عما درسته من قبل. كل درس يتكيّف معك.
المتغيّر حاوية مسمّاة تخزّن قيمة يمكن الرجوع إليها لاحقًا في برنامجك.
في بايثون، تُنشئ واحدًا بكتابة الاسم ثم علامة يساوي ثم القيمة التي تريد تخزينها.
يمكن أن تتغيّر القيمة بمرور الوقت. إعادة الإسناد ببساطة توجّه الاسم إلى قيمة جديدة.
احصل على شهادتك
احصل على شهادات لكل دورة تكملها. أضفها إلى ملفك على LinkedIn وسيرتك الذاتية لعرض خبرتك البرمجية لأصحاب العمل.
شهادة إتمامأساسيات Python
أضف إلى LinkedInلماذا تتعلم React مع Coddy
- اكتب JSX في متصفحك من الدرس الأول. لا تثبيت لـ Node ولا create-react-app ولا إعداد للبناء - كل درس يمنحك كود مكوّن حقيقيًا لتعديله وتشغيله.
- منهج ينتهي بتطبيقات حقيقية: المكوّنات وprops والحالة والأحداث والخطافات في قسم الأساسيات، ثم قسم Next.js كامل - التوجيه والتخطيطات ومكوّنات الخادم والعميل وجلب البيانات وserver actions.
- تلميحات ذكاء اصطناعي تقرأ كودك الفعلي. عندما لا يُعرض مكوّن أو لا تتحدث الحالة، تحصل على إشارة تدلّك على الخطأ دون كشف الحل.
- شهادة React مجانية عند الإنهاء - إشارة قوية لوظائف الواجهة الأمامية، حيث تظل React مكتبة الواجهات الأكثر طلبًا.
أسئلة شائعة حول تعلّم React
ما هي React؟
React مكتبة JavaScript لبناء واجهات المستخدم من مكوّنات - دوال صغيرة قابلة لإعادة الاستخدام تُرجع ترميزًا. أنشئت في Meta وتشغّل جزءًا هائلًا من الويب الحديث، من Facebook وInstagram إلى منتجات ملايين الشركات الناشئة، وهي باستمرار مهارة الواجهة الأمامية الأكثر طلبًا في إعلانات الوظائف.
هل أحتاج إلى معرفة JavaScript قبل تعلّم React؟
ينبغي أن تكون مرتاحًا مع أساسيات JavaScript - المتغيرات والدوال والمصفوفات والكائنات. تقدّم الدورة أنماط JavaScript التي تعتمد عليها React (الدوال السهمية، والتفكيك، وmap) عند ظهورها، فلا حاجة لأن تكون خبيرًا. وإن كنت جديدًا تمامًا على البرمجة، فابدأ برحلة JavaScript أولًا.
هل تعلّم React صعب؟
الأفكار الأساسية - المكوّنات وJSX وprops - تترسخ سريعًا لأنها تشبه ما تعرفه بالفعل: الدوال وHTML. أما الحالة والتأثيرات وتدفق البيانات فتحتاج مزيدًا من التمرين، ولهذا يجعلك كل درس هنا تكتب كود مكوّنات حقيقيًا وتشغّله بدلًا من الاكتفاء بالقراءة.
ما الفرق بين React وNext.js؟
React هي مكتبة الواجهات: المكوّنات والحالة والعرض. أما Next.js فهو إطار عمل مبني فوق React يضيف ما تحتاجه التطبيقات الحقيقية: التوجيه عبر نظام الملفات، والتخطيطات، والعرض على الخادم، وجلب البيانات، وserver actions. تعلّمك الدورة أساسيات React أولًا، ثم يأخذك قسم مخصص لـ Next.js من المكوّنات إلى تطبيق كامل.
هل يمكنني تعلّم React عبر الإنترنت مجانًا؟
نعم. دورة React التفاعلية مجانية: دروس عملية، وتحديات برمجية بتغذية راجعة فورية، وتلميحات مدعومة بالذكاء الاصطناعي، واختبارات قصيرة. كل شيء يعمل في متصفحك، فلا شيء للتثبيت ويمكنك البدء فورًا.
هل أحصل على شهادة بعد دورة React؟
نعم. عند إنهاء الدورة تحصل على شهادة إتمام مجانية يمكنك إضافتها إلى LinkedIn أو سيرتك الذاتية. ومع المكوّنات والتطبيقات التي تبنيها خلال الرحلة، تشكّل دليلًا حقيقيًا على مهارات عملية في React وNext.js.
