Never stop talking " STOP the Gaza Genocide "

React JS | أكاديمية ترميز

أكاديمية ترميز

أكاديمية ترميز

أكاديمية ترميز هي قناة تسعى لتقديم محتوى عربي لتعليم البرمجة و الارتقاء بجودة هذا المحتوى شكلا و مضمونا لتقدم مادة تعليمية بشكل مختلف و جودة مميزة تسهل وصول المعرفة للمتعلمين.

Course Details

Course Lessons

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

    ( 4.6 Of 5 )

    16 reviews
    5 Stars
    68.75%
    4 Stars
    12.5%
    3 Stars
    12.5%
    2 Stars
    6.25%
    1 Star
    0%
    R
    Radwa Hakeem

    29-04-2026
    S
    Shahd khair

    04-11-2025
    M
    moaaz amr

    24-09-2025
    د
    ديالا خالد

    27-06-2025
    H
    Hager Mahmoud

    03-06-2025
    H
    Hanan Awad

    04-04-2025
    M
    Mustafa Ahmed

    26-12-2024
    A
    ABDULLAH YOUSEF

    24-12-2024
    R
    Rawan Mohamed

    15-10-2024
    كورس رياكت React JS Course

    رياكت هو أحد أشهر أطر عمل الجافاسكريبت في الوقت الحالي و هو من أكثر أطر العمل المطلوبة في سوق العمل، في هذه السلسلة أضع لكل شرحا مفصلا مزودا بأشكال التطبيق المختلفة و بالشروحات النظرية متى ما دعت الحاجة لأضمن وصول المعلومة للمتعلم، .
    حيث يتضمن هذا الكورس كل المفاهيم التي ستحتاجها لبدء مشروع رياكت حقيقي أو الدخول في أي فريق برمجي يستخدم إطار عمل رياكت.
    سنتعلم بناء المكونات و التعامل معها، سنفهم السبب الأساسي و القيمة الحقيقية التي أضافتها أطر العمل. سنفهم مفهوم (الستيت) و طريقة التعامل معها و إداراتها، سنتعلم كذلك طريقة ربط المشاريع بال API.
    و الأهم من هذا كاملا هو معرفة كيف تتعلم و ما هي الطريقة التي تبحث فيها عن المعلومة و تستخرج منها الحل ثم توظفه بالطريقة الصحيحة التي توفر لك الميزة التي تريد بناءها.
    هناك الكثير من المفاهيم في البرمجة عموما و في رياكت تحديدا التي تحتاج إلى إظهار مجموعة من الصور و الرسومات المتحركة لتشرح المعلومة من الجانب النظري مما يسهل على المتعلم استيعابها و تخيلها و معرفة ما الذي يحدث خلف التفاصيل، و هذا من أكثر الأمور التي حرصت على توفيرها في هذه السلسلة خصوصا في المفاهيم التأسيسية أو في الأمور التي تتطلب هذا النوع من الشرح النظري قبل البدء فعليا بالتطبيق العملي.
    كل هذا و أكثر بتحديات و مشاريع و شروحات مفصلة
    أتمنى لك رحلة تعليمية جميلة و ممتعة