21: مقدمة إلى ال State في رياكت | Intro to State in React — Transcript

Full transcript

1. 0:00السلام عليكم حياكم الله بالدرس ال 21 من
2. 0:03سلسله دروس رياكت جي اس وبهذا الدرس راح
3. 0:05نتكلم بمقدمه نظريه جدا جدا مهمه عن مفهوم
4. 0:09الستيت وايش هي الستيت مانجمنت اساسا وكيف
5. 0:12بتشتغل في رياكت لما تتعامل مع اطر عمل
6. 0:15الجافا سكريبت بشكل عام سواء كانت فيو جي
7. 0:17اس رياكت انجر او حتى مع اطر العمل الاخرى
8. 0:20مثل اطر عمل التطبيقات رياكت نيتيف فلتر
9. 0:23الى اخره من اطر العمل المختلفه فغالبا
10. 0:26راح يمر عليك مفهوم الستيت ستيت مانجمنت
11. 0:29وانا ازعم انه في عدد من المطورين بيبدا
12. 0:32بتعلم الاستيت ضمن اطار العمل وبيتعلم
13. 0:35بشكل سطحي وبيكمل عليها وبيصير يستخدمها
14. 0:38بشكل شبه يومي بدون ما يكون فاهمها بتعمق
15. 0:42كافي طيب اذا كانت اموره ماشيه وعم
16. 0:44يستخدمها بشكل شبه يومي واموره تمام ليش
17. 0:47محتاج انه يفهم الستيت بقدر معين من
18. 0:49التعمق السبب انه اطر العمل اساسا هي
19. 0:52معتمده على هذا الستيت وعلى مفهومها
20. 0:54وبالتالي لما تفهم ايش هي الستيت خلف
21. 0:57الكواليس وبالتفصيل هذا الشيء بسا ساعدك
22. 1:00على انك تفهم اطار العمل بشكل اكبر وانك
23. 1:03تكون قادر على اكتشاف واصلاح مجموعه من
24. 1:06المشكلات المتعلقه بالتعامل مع الاستيت
25. 1:09والتعديل عليها اللي ما راح تكون اصلا
26. 1:11قادر على اصلاحها او فاهم ايش اللي عم
27. 1:14يصير بالضبط لما يطلع لك الخطا في حال ما
28. 1:17كنت فاهم الستيت بتعمق كافي بالاضافه لذلك
29. 1:20حتى لو كان موقعك او تطبيقك شغال بدون
30. 1:22مشاكل فهمك لل ستيت راح يساعدك انك تزيد
31. 1:26من كفاءه هذا الموقع او هذا التطبيق لانك
32. 1:28حتعرف الطريق المثاليه اللي تتعامل فيها
33. 1:31مع الاستيت واللي تغير فيها وبناء عليها
34. 1:34تقلل الاضرار او التكاليف الخاصه بتعديل
35. 1:37ها الستيت في مشروعك ويكفي انه نقول في
36. 1:40نهايه الامر انه الستيت اساسا هي احد
37. 1:43الاسباب الرئيسيه اللي كانت خلف ظهور اطر
38. 1:46العمل بشكل عام اذا ما كانت هي اصلا السبب
39. 1:49الرئيسي والاول طيب السؤال الان ايش هي
40. 1:51الستيت اساسا الستيت كتعريف عام اذا بدي
41. 1:54اعرف لك اياها هي عباره عن البيانات
42. 1:56الموجوده في تطبيقك او موقعك او مشروعك
43. 1:59بشكل عام في لحظه زمنيه معينه وبالتالي كل
44. 2:03لحظه زمنيه موجوده عندك بيكون لها ستيت
45. 2:06مختلف لاحظ انه التعريف له علاقه مباشره
46. 2:09بالبيانات طيب ايش هي البيانات اذا بدنا
47. 2:12ناخذها من نظره برمجيه ايش بتمثل البيانات
48. 2:15البيانات هي عباره عن القيم اللي عم تمشي
49. 2:18في مشروعك تقدر تعتبرها انه هي عباره عن
50. 2:21القيم اللي عم تعبيها في متغيرات بعدين
51. 2:23تعتمد على هي المتغيرات لاغراض مختلفه
52. 2:26وبالتالي بنقدر نعتبر انه هي البيانات او
53. 2:29الستيت هي الى حد ما قيم المتغيرات
54. 2:31الموجوده عندك قيم المتغيرات ها مهمه جدا
55. 2:35لانه لو افترضنا على سبيل المثال انه عندك
56. 2:37موقع هذا الموقع فيه تو انبوت بدخل فيهم
57. 2:40المستخدم الرقم الاول والرقم الثاني
58. 2:42وبعدين في عندك زر بيسوي لك عمليه حسابيه
59. 2:44عشان يطلع لك مجموعهم في عندك عده طرق
60. 2:47عشان تمثل هذا الشيء من الناحيه المنطقيه
61. 2:50بس غالبا راح يكون عندك متغير يمثل المدخل
62. 2:53الاول اللي بدخله المستخدم وعندك متغير
63. 2:56ثاني يمثل المدخل الثاني اللي بغيره
64. 2:58المستخدم وكذلك ممكن يكون عندك متغير ثالث
65. 3:01او قيمه ثالثه بتحسبها من المتغيرين
66. 3:04الاولين اللي هي راح تكون تمثل الناتج
67. 3:06الان لو اجى المستخدم وحط رقم 10 على سبيل
68. 3:09المثال في الانبوت الاول بناء على ذلك
69. 3:12المتغير المرتبط بهذا الانبوت الاول لازم
70. 3:15يحمل القيمه ع لازم تتغير قيمته الى قيمه
71. 3:1910 وبهي الحاله تغيرت قيمه هذا المتغير
72. 3:22بمعنى انه تغيرت البيانات وبالتالي بقول
73. 3:25انه تغيرت الستيت ولو اجى المستخدم وحط
74. 3:28رقم 20 في الانبوت الثاني على سبيل المثال
75. 3:30صار عندي في الانبوت الاول 10 و20 بينما
76. 3:33كان قبل شوي يحتوي على 10
77. 3:36والانبوب وبالتالي في ها اللحظه كذلك
78. 3:39بنقدر نقول انه الستيت تغيرت لانه في
79. 3:41بيانات معينه تغيرت وبناء على ذلك لو جيت
80. 3:45وسالتك ايش هي الستيت الحاليه لهذا الموقع
81. 3:48او لهذا المشروع راح تقدر تعبر لي عن ها
82. 3:51الستيت انه المتغير الاول يساوي 10
83. 3:54المتغير الثاني يساوي 20 الان اي تغيير
84. 3:57على احد من هذول المتغيرين او اي متغير له
85. 4:00تاثير على المشروع هذا يعني تغيير في
86. 4:03الستيت مهما كان هذا التغيير بسيط حتى لو
87. 4:06اضفت صفر على يسار الرقم 10 فهي الصفر راح
88. 4:09تنضاف على هذا المتغير راح تغير من شكل
89. 4:11الانبوت اللي طالع للمستخدم وراح تغير من
90. 4:14قيمه المتغير وبالتالي بهي الحاله تغيرت
91. 4:17الستيت وبالتالي ها هي باختصار الستيت هي
92. 4:19عباره عن بيانات مشروعك في اي لحظه من
93. 4:23الزمن وغالبا مع كل لحظه راح تتغير الستيت
94. 4:26وراح يكون التعبير عنها او وصفها مختلف
95. 4:28ولما تسمع كلمه في اطر العمل بشكل عام
96. 4:31غالبا راح تسمع كلمه الستيت مانجمنت فايش
97. 4:34هي الستيت مانجمنت الستيت مانجمنت وهذا
98. 4:36مجرد تعريف شخصي ما هو تعريف علمي بس عشان
99. 4:39اوضح لك الفكره بقدر اعبر عنها بانك تبني
100. 4:43او ترتب الكود الموجود عندك بترتيب معين
101. 4:46او ستركشر معين بحيث انه اليو اي الموجود
102. 4:50عندك او العناصر المرئيه تعكس لك البيانات
103. 4:53الصحيحه في اي لحظه زمنيه معينه بمعنى انه
104. 4:56الستيت الموجود في مشروعك منعكس على اليو
105. 4:59اي بطريقه صحيحه بدون اخطاء وبدون مشاكل
106. 5:02بمعنى اخر تخيل لو انه عندك موقع هذا
107. 5:04الموقع بيقدر المستخدم من خلاله انه يسجل
108. 5:07الدخول او يسجل حساب جديد فالمفروض يطلع
109. 5:09له بالهيدر زرين اللي هو زر التسجيل وزر
110. 5:12تسجيل الدخول بحكم انه المستخدم لسه هلا
111. 5:14دخل الموقع وما هو مسجل دخوله فهي
112. 5:17البيانات هي المعلومه انه المستخدم مجرد
113. 5:20مستخدم ضيف ما هو مسجل دخوله ترى هي بنقدر
114. 5:22نعتبرها الستيت وطريقه ادارتها وترتيبها
115. 5:25وتركيبها وكيف انه نعكسها على اليو اي
116. 5:28بانه نطلع له رين تسجيل وتسجيل الدخول هذا
117. 5:31جزء من الستيت مانجمنت الان لما يجي هذا
118. 5:34المستخدم ويسجل دخوله المفروض انه شكل
119. 5:37اليو اي الموجود في الهيدر يتغير ما هو
120. 5:40منطقي انه المستخدم يكون مسجل دخوله واطلع
121. 5:42له زر التسجيل وتسجيل الدخول بنفس الوقت
122. 5:45لا البيانات تغيرت الستيت تغيرت المستخدم
123. 5:49كان مستخدم ضيف وتحول الى مستخدم مسجل
124. 5:52دخوله وبناء على تغير هذا الستيت انا لازم
125. 5:55اغير اليو اي واحدثه عشان يعكس الستيت
126. 5:59بطريقه صحيحه ودقيقه في هاي اللحظه من
127. 6:02الزمن الان لما المستخدم يروح على صفحه
128. 6:04البروفايل المفروض يطلع له بروفايله
129. 6:06بالبيانات الخاصه فيه مو يطلع له تنبيه
130. 6:09انه هو ما هو مسجل دخوله ولازم يسجل دخوله
131. 6:12لانه اصلا سجل دخوله اذا طلع له هذا
132. 6:14التنبيه معناها في غلط في اظهار اليو اي
133. 6:17المناسب للستات الحاليه اللي هي انه
134. 6:19المستخدم مسجل دخوله موضوع انك تخلي
135. 6:21الواجهات او الكومبوننت او اليو اي المنت
136. 6:25او مهما كان اسمهم تعكس لك الستيت الحقيقي
137. 6:28هو فعليا موضوع جدا كبير ويندرج تحته
138. 6:31مجموعه من الاشياء اللي لازم تستوعبها
139. 6:34وطريقه ترتيب كودك عشان تعرض الستيت
140. 6:37الحقيقيه في الوقت الصحيح هذا جزء جدا مهم
141. 6:40من الستيت مانجمنت وموضوع انك تخلي
142. 6:42الواجهات تعكس لك الستيت الصحيح في الوقت
143. 6:45الصحيح باستخدام البيور جافا سكريبت على
144. 6:47سبيل المثال بدون استخدام اي اطر عمل ترى
145. 6:50هو موضوع صعب الى حد ما واطر العمل بتسهل
146. 6:53لك اياه بشكل جدا كبير مره ثانيه ترى هذا
147. 6:56كان احد اهم الاسباب لظهور اطر العمل هي
148. 6:59انه اطر العمل بتساعدك بشكل جدا كبير
149. 7:02باستيت مانجمنت انك تعكس اليو اي الصحيح
150. 7:05للبيانات في الوقت الحالي او في اللحظه
151. 7:08الحاليه هذا لا يعني انه ما في اي مجهود
152. 7:10عليك لا لازم تفهم الستيت ولازم تستوعب
153. 7:12ايش هو الستيت مانجمنت ولازم تفهم ادواتها
154. 7:15وكيف طريقه استخدامها مثل ريدكس او
155. 7:17الكونتكس اي بي اي في رياكت او فيو اكس في
156. 7:20فيو او غيره من الادوات الاخرى على حسب
157. 7:22اطار العمل عشان توفر لك ستيت مانجمنت
158. 7:25مرتب ومركب بطريقه صحيحه وبناء على هي
159. 7:29المعرفه المتعمقه في الستيت ستيت مانجمنت
160. 7:31وادواتها وطريقه استخدامها راح تكون قادر
161. 7:34على بناء تطبيقات ومواقع بطريقه انظف وذات
162. 7:37جوده اعلى هذا المقطع هو عباره عن جزء من
163. 7:40كورس متكامل ومفصل عن رياكت جي اس ورابط
164. 7:43هذا الكورس راح تلاقيه بالوصف هي كانت
165. 7:45مقدمه نظريه عن الاستيت والستات مانجمنت
166. 7:48انا ماني متوقع منك انه من خلال هذا الشرح
167. 7:50البسيط انت تكون مستوعب تماما ايش هي
168. 7:52الاستيت ستيت مانجمنت بس هي مجرد مقدمه
169. 7:55نظريه عشان تعطيك مقدمه عن هذا المفهوم
170. 7:58وبعدين لما نتق الجانب التطبيقي راح نصير
171. 8:00نربط الاشياء التطبيقيه اللي بنسويها مع
172. 8:03ها المقدمه النظريه وقتها ممكن ترجع مره
173. 8:06ثانيه الى ها المقدمه النظريه عشان تكتمل
174. 8:08عندك الصوره بشكل كامل وتفهم بالضبط ايش
175. 8:11هي الستيت وايش هي الستيت مانجمنت اتمنى
176. 8:13ان شاء الله انه كان الشرح واضح ونشوفكم
177. 8:15ان شاء الله بالدرس
178. 8:17الجاي