11: تحدي بناء ال Components

Course Lessons

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