رئيس مجلس الإدارة ورئيس التحرير أحمد حمدي

كورس رياكت 2026

👤 أكاديمية ترميز 🎬 131 درس ⏱️ 27 ساعة 50 دقيقة 📶 مبتدئ 🇪🇬 عربي
كورس رياكت | React JS Course Intro
EG-24 ACADEMY
EG24
EG-24ACADEMY
— أكاديمية مصر 24 —
CERTIFICATE
OF COMPLETION
THISCERTIFICATE IS PROUDLY PRESENTED TO
اسمك هنا
FOR SUCCESSFULLY COMPLETING THE COURSE
كورس رياكت 2026
ISSUED ON
21 أغسطس 2026
Ahmed Hamdy
AHMED HAMDY
FOUNDER
VERIFY CERTIFICATE
CERTIFICATE ID
PREVIEW
رقم تحقق الشهادة
EG24
ACADEMY
LEARN GROW
🔒

شاهد 50% من الكورس واحصل على شهادتك المجانية

🎓 2 طالب أتموا هذا الكورس
✅ تتبع تقدمك في الكورس
🏆 شهادة مجانية عند الإتمام
📊 إحصائياتك محفوظة دائماً
🔖 استكمل من حيث توقفت

إنشاء حساب مجاني يأخذ ثوانٍ فقط

📋 محتوى الكورس 131 درس · 27 ساعة 50 دقيقة
  • 1 كورس رياكت | React JS Course Intro 5:45
  • 2 هدية رمضان؟ ما الجديد بخصوص كورس رياكت React JS؟ 4:21
  • 3 1: عن كورس رياكت | المتطلبات | طريقة التعلم | about React course 5:30
  • 4 1.5: كيف تحصل على كل أكواد الكورس من github 9:45
  • 5 1.6: الحصول على الأكواد و التعامل معها باستخدام git 5:41
  • 6 2: ما هو رياكت ؟ | What is React JS 8:27
  • 7 3: التجربة الأولى ل React 9:16
  • 8 4: تجهيز بيئة العمل و إنشاء مشروع React جديد 10:50
  • 9 5: فهم هيكلة مشاريع React 14:02
  • 10 6: بناء ال component الأول في React 17:46
  • 11 7: ما هو ال component في React؟ | شرح نظري 5:46
  • 12 8: مقدمة إلى ال JSX 11:06
  • 13 9: إضافة Style لعناصر ال JSX 10:20
  • 14 10: إضافة ال Classes في ال JSX 12:00
  • 15 11: تحدي بناء ال Components 3:37
  • 16 12: حل تحدي ال Components في React 28:41
  • 17 13: إرسال ال props في ال Components 19:07
  • 18 14: إرسال ال JSX كـ Props إلى ال Component 14:03
  • 19 15: تحدي ال Props 1:53
  • 20 16: حل تحدي ال Props 10:41
  • 21 17: Conditional Rendering in React 12:20
  • 22 18: Rendering List in React 15:22
  • 23 Private video
  • 24 19: تحدي ال List Rendering 1:53
  • 25 20: حل تحدي ال List Rendering 15:40
  • 26 21: مقدمة إلى ال State في رياكت | Intro to State in React 8:19
  • 27 22: مشكلة تعديل ال State من ال Component 6:19
  • 28 23: ما هو ال React DOM و كيف يعمل؟ 8:21
  • 29 24: useState Hook in React 18:39
  • 30 25: إدارة ال State مع المدخلات | Managing State with Input in React 13:58
  • 31 26: State with Forms in React 17:54
  • 32 27: حل مشكلة ال Object State في ال Form 13:59
  • 33 28: Other Form Fields with State 16:18
  • 34 29: Select & Radio Inputs with State 10:39
  • 35 30: تحدي تحديث ال State Object 4:23
  • 36 31: حل تحدي تحديث ال Object State 10:27
  • 37 32: Using Arrays as State in the Component in React JS 17:22
  • 38 33: التعديل و الحذف في ال Array State في رياكت 17:26
  • 39 34: التعديل في ال Array State 9:42
  • 40 35: تحدي تحديث ال Array State 2:07
  • 41 36: حل تحدي تحديث ال Array State 14:03
  • 42 37: التحديث المتكرر لل state في رياكت 15:05
  • 43 38: تحدي التحديث المتتالي لل State 3:22
  • 44 39: حل تحدي التحديث المتتالي لل State 5:22
  • 45 40: عرض مشروع Loan Application Form 6:00
  • 46 41: المشروع الأول: بناء الواجهات و ال Components 35:07
  • 47 42: المشروع الأول: بناء المنطق البرمجي 38:22
  • 48 المشروع الأول: إظهار ال Modal و إكمال المشروع 28:05
  • 49 44: Communication using (Props) 15:46
  • 50 45: Sending the event handler to the props 12:30
  • 51 47: Prop Drilling Issue 11:20
  • 52 48 : Using (useContext) to Fix The Prop Drilling Issue 23:48
  • 53 49: Using (useContext) to Share Data in The APP 14:27
  • 54 50 : Context Challenge 3:45
  • 55 51 : Context Challenge Solution 11:41
  • 56 52 : Intro To React Router 17:33
  • 57 53 : Using (Link) To Navigate To Other Pages 9:49
  • 58 54 : Dynamic Routes 19:57
  • 59 55 : Extracting Params From The Dynamic Routes 12:41
  • 60 56 : 404 page إظهار صفحة الخطأ 9:53
  • 61 57 : Nested Routes - الروابط المتداخلة 11:41
  • 62 58 : SSR vs CSR - SPA? ما هي مواقع الصفحة الواحدة؟ 8:59
  • 63 59 : البدء في استخدام أطر العمل التصميمية في رياكت 17:37
  • 64 60 : تخصيص التصميم الكلي للمشروع 10:36
  • 65 61 : Material UI تخصيص و ترتيب الصفحة في 10:45
  • 66 62 : icons استخدام ال 6:00
  • 67 63 : Material UI تحدي الـ 1:47
  • 68 64 : Material UI حل تحدي الـ 10:10
  • 69 65 : مقدمة لمشروع قائمة المهام 6:19
  • 70 66 : استعراض مشروع قائمة المهام 4:01
  • 71 67 : تنزيل المكتبات و البدء في المشروع 6:22
  • 72 68 : Todo List تصميم الهيكل العام لل 16:17
  • 73 69 : Todo Component بناء الـ 14:44
  • 74 70 : Todo Component إكمال بناء ال 7:55
  • 75 71 : إضافة خطوط خارجية للمشروع 19:51
  • 76 72 : إكمال التصميم الخاص بإضافة مهمة جديدة 8:33
  • 77 73 : في قائمة المهام Todos إظهار مجموعة 8:31
  • 78 74 : إضافة مهمة جديدة 9:06
  • 79 75 : إضافة مهمة للمهام المنجزة 21:08
  • 80 76 : Context (useContext hook) الاعتماد على ال 12:21
  • 81 77 : حذف المهام من قائمة المهام 19:10
  • 82 78 : تعديل مهمة في قائمة المهام 21:14
  • 83 79 : localStorage تخزين المهام في ال 14:52
  • 84 80 : useEffect in React and how to retrieve data from localStorage 13:26
  • 85 81 : Retrieving The Todos From Local Storage 7:59
  • 86 82 : تصنيف المهام المنجزة / غيرالمنجزة 18:20
  • 87 83 : إضافة اللمسات الأخيرة على المشروع 10:03
  • 88 84 : Project Deployment - رفع المشروع 11:26
  • 89 85 : مقدمة لتنظيف أكواد المشروع 3:42
  • 90 86 : Caching The Computations Using useMemo 15:54
  • 91 87 : Moving The Dialog Modals Up (lifting the state up) 29:56
  • 92 88 : Adding Toast as Providers 10:36
  • 93 89 : Adding Toast Logic With Context 15:15
  • 94 90 : Turning The Context Into Provider 26:07
  • 95 90.1 : تصحيح كود الدرس الأخير 3:31
  • 96 91 : Introduction To Use Reducer 36:35
  • 97 92 : Applying useReducers to Todo App 24:04
  • 98 93 : Applying useReducer on Update / Delete 19:36
  • 99 94 : Combining Reducer With Context 25:53
  • 100 95 : Fixing The Mutation Problem 10:15
  • 101 96 : useState - useEffect - useMemo - useContext - useReducer مراجعة عامة 21:42
  • 102 96 : useState - useEffect - useMemo - useContext - useReducer مراجعة عامة 4:12
  • 103 97 : API Section مقدمة إلى ال 2:43
  • 104 98 : استعراض مشروع الطقس 3:40
  • 105 99 : تنزيل المكتبات و الخطوط 12:46
  • 106 100 : بناء الواجهات 30:07
  • 107 101 : و فهمه api استعراض ال 9:24
  • 108 102 : API Request in React 12:56
  • 109 103 : useEffect Cleanup 18:12
  • 110 104 : في الصفحة API تعبئة بيانات ال 12:16
  • 111 105 : using moment library for data and time 7:25
  • 112 106 : translation using i18next in react 12:36
  • 113 107 : تغيير اللغة من خلال الضغط على الزر 12:15
  • 114 108 : تغيير اتجاه الموقع بناء على اللغة المحددة 5:26
  • 115 109 : اختتام و رفع المشروع 5:38
  • 116 110 : Redux مقدمة إلى فصل 4:49
  • 117 111 : Redux - شرح نظري 14:32
  • 118 112 : Redux with React البدء باستخدام 45:51
  • 119 113 : Using Redux for Subtraction 9:33
  • 120 114 : . مطابقة الشرح النظري و التطبيق العملي 12:32
  • 121 115 : Redux تحدي 1:23
  • 122 116 : Redux حل تحدي 4:00
  • 123 117 : Redux Dev Tool 8:34
  • 124 118 : The Problem of Async Logic in Redux 12:43
  • 125 119 : Async Logic in Redux - شرح نظري 4:36
  • 126 120 : Using Redux with API 16:40
  • 127 121 : Adding the Async Logic to Redux 13:44
  • 128 122 : Adding Async Logic to the Redux Code 25:00
  • 129 123 : Completing the Integration with Redux 12:03
  • 130 124 : Redux & Async Logic with Redux Revision 18:20
  • 131 خاتمة السلسلة | ماذا بعد رياكت؟ 5:32
▶ يُشغَّل الآن
كورس رياكت | React JS Course Intro

📘 نظرة عامة على الكورس

يُقدّم هذا الكورس المجاني شرحاً شاملاً لـ رياكت من الصفر باللغة العربية في مجال برمجة وتطوير المواقع، ويستهدف المبتدئين الراغبين في بناء مهاراتهم العملية واحترافية في 2026. يُقدّمه أكاديمية ترميز باللغة العربية بأسلوب مبسّط ومنظّم.

يضم الكورس 131 درساً بمدة إجمالية 27 ساعة 50 دقيقة، تأخذك من الصفر حتى الاحتراف خطوةً بخطوة.

لماذا تتعلم رياكت من الصفر باللغة العربية؟

  • JavaScript هي اللغة الوحيدة التي تعمل على المتصفح، وأصبحت مع Node.js تشمل كل أجزاء تطوير الويب.
  • مجاني بالكامل — ابدأ الآن دون أي رسوم
  • شهادة إتمام معتمدة — أضفها لـ CV وLinkedIn
  • تعلّم في أي وقت — بالسرعة التي تناسبك
  • يُستخدم JavaScript في: تطوير الواجهات (React/Vue/Angular)، الخلفية (Node.js)، تطبيقات الموبايل (React Native).

مسار التعلم في هذا الكورس

يسير الكورس وفق مسار منطقي متدرّج: أساسيات JS → DOM → Async/Await → Frameworks → Node.js

المتطلبات السابقة

أساسيات HTML و CSS — يمكن لأي شخص البدء في هذا الكورس.

الأدوات والبرامج المستخدمة

  • VS Code
  • Node.js
  • npm
  • Browser DevTools
  • Postman

متطلبات الجهاز

  • RAM 4GB (يُوصى 8GB)
  • أي معالج حديث

الوظائف المتاحة بعد إتمام الكورس

  • Frontend Developer
  • Full Stack Developer
  • Node.js Developer
  • React Developer

متوسط رواتب رياكت من الصفر باللغة العربية 2026

  • مصر: 7,000-22,000 ج
  • السعودية: 10,000-28,000 ر
  • الإمارات: 12,000-32,000 د
  • أمريكا: $85,000-$140,000

كم من الوقت تحتاج لإتقان رياكت من الصفر باللغة العربية؟

  • أساسيات: 25-35 ساعة
  • React/Vue: 30-50 ساعة
  • Full Stack: 100-150 ساعة

الشهادات المعتمدة في مجال برمجة وتطوير المواقع

  • Meta Front-End Developer
  • JavaScript Algorithms (freeCodeCamp)

مشاريع عملية ستتمكن من بناؤها

  • Landing Page
  • Todo App
  • Weather App
  • E-commerce Frontend
  • REST API

ماذا بعد هذا الكورس؟

بعد إتمام الكورس، يُوصى بالتعمق في: React، Next.js، TypeScript، Node.js.

الأقسام الجامعية ذات الصلة

يُناسب هذا الكورس طلاب: كلية حاسبات ومعلومات، كلية هندسة.

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

أ
المدرّس / القناة
أكاديمية ترميز
🎬
عدد الدروس
131 درس
⏱️
المدة الإجمالية
27 ساعة 50 دقيقة
📶
المستوى
مبتدئ
🌍
اللغة
العربية
🎓
الشهادة
مجانية عند الإكمال
المتطلبات
لا توجد متطلبات مسبقة
📂
التصنيف
برمجة وتطوير المواقع

🎯 ماذا ستتعلم في هذا الكورس

كورس رياكت | React JS Course Intro
هدية رمضان؟ ما الجديد بخصوص كورس رياكت React JS؟
1: عن كورس رياكت | المتطلبات | طريقة التعلم | about React course
1.5: كيف تحصل على كل أكواد الكورس من github
1.6: الحصول على الأكواد و التعامل معها باستخدام git
2: ما هو رياكت ؟ | What is React JS
3: التجربة الأولى ل React
4: تجهيز بيئة العمل و إنشاء مشروع React جديد
+ 123 موضوع آخر...

💼 الوظائف التي يؤهلك لها الكورس

💼
مطور ويب
بناء مواقع احترافية
💰 8000-25000 ج.م
💼
فريلانسر
العمل الحر من المنزل
💰 يتفاوت

❓ أسئلة شائعة عن الكورس

كم عدد دروس الكورس؟ +
يحتوي الكورس على 131 درس بإجمالي مدة 27 ساعة 50 دقيقة.
هل الكورس مجاني بالكامل؟ +
نعم، الكورس مجاني تماماً ومتاح بالكامل على منصة مصر 24 بدون أي رسوم.
هل الكورس مناسب للمبتدئين؟ +
الكورس موجّه لمستوى مبتدئ، وهو مناسب تماماً للمبتدئين من الصفر.
ما لغة الشرح في الكورس؟ +
الكورس مشروح باللغة العربية بأسلوب واضح ومبسّط.
هل يمكن تعلم الكورس بدون خبرة سابقة؟ +
نعم بالتأكيد. هذا الكورس مصمم للمبتدئين من الصفر.
كم يستغرق إتمام هذا الكورس؟ +
المدة الإجمالية 27 ساعة 50 دقيقة. يُنصح بتخصيص ساعة يومياً.
هل أحصل على شهادة عند الإتمام؟ +
نعم، تحصل على شهادة إتمام مجانية من مصر 24 بعد مشاهدة جميع الدروس.
من يقدم هذا الكورس؟ +
الكورس مقدم من أكاديمية ترميز.
🎓 أكاديمية مصر 24
EG24
EG-24 ACADEMY
EG24
EG-24ACADEMY
— أكاديمية مصر 24 —
CERTIFICATE
OF COMPLETION
THISCERTIFICATE IS PROUDLY PRESENTED TO
اسمك هنا
FOR SUCCESSFULLY COMPLETING THE COURSE
اسم الكورس هنا
ISSUED ON
21 أغسطس 2026
Ahmed Hamdy
AHMED HAMDY
FOUNDER
VERIFY CERTIFICATE
CERTIFICATE ID
PREVIEW
رقم تحقق الشهادة
EG24
ACADEMY
LEARN GROW
أقرب طريق لحلمك — سواء مشروعك الجديد أو وظيفة أحلامك — يبدأ من هنا، بكورسات مجانية 100% للأبد.