18: Rendering List in React — Transcript
Full transcript
- 0:00السلام عليكم حياكم الله بالدرس ال 18 من
- 0:02سلسله دروس رياكت جي اس وبهذا الدرس راح
- 0:05نتكلم عن الريندرينج الخاص بالست اذا كان
- 0:08عندك قائمه معينه ايش هي افضل طريقه انك
- 0:11تعرض ها القائمه وقبل ما نبدا خلينا نتكلم
- 0:14عن المشكله بشكل سريع كالعاده شفنا في
- 0:17التحديات السابقه كيف انك ممكن تعرض
- 0:19مجموعه من البوستات او مجموعه من الازرار
- 0:22وبناء عليها اللي كنت اسويه اني اروح اسوي
- 0:25يدويا مجموعه من البوستات الموجوده عندي
- 0:28لكن الموضوع فعليا ما هو عملي وغير قابل
- 0:31للتوسع خصوصا في المشاريع الكبيره وما هي
- 0:34ممارسه صحيحه انك تسويها بهي الطريقه
- 0:37اليدويه راح يكون افضل بكثير بالنسبه لك
- 0:40واسهل من ناحيه الكود انه اصلا يكون عندك
- 0:43مصفوفه بتعرف فيها البيانات فقط ما بتعرف
- 0:46فيها اي شيء له علاقه باليو اي او الجي اس
- 0:49اكس بعدين سوي فور لوب ضمنيا يمشي على هي
- 0:54المصفوفه عنصر ورا الثاني ولكل داتا
- 0:58موجوده عندك او لكل بيانات موجوده عندك
- 1:00يروح يسوي العنصر اللي انت بدك اياه سواء
- 1:03كان بوست ولا بتون ولا غيره هي الطريقه
- 1:06اسهل بشكل جدا كبير ليش لانك بمجرد ما
- 1:10تضيف عنصر جديد على المصفوفه تلقائيا راح
- 1:13ينضاف له بوست جديد او بوتون جديد على حسب
- 1:16اللوجيك اللي انت مسويه اذا كانت المشكله
- 1:19ما هي واضحه لسه فمع التطبيق العملي راح
- 1:22توضح معك بشكل اكبر وخصوصا مع التحدي اللي
- 1:25راح نتكلم عنه في الدرس الجاي فخلينا
- 1:27نتكلم الان عن رندر الليست في رياكت جي اس
- 1:31انا الان عندي هذا الكود اللي راح ابدا
- 1:33منه اللي هو فعليا الكود الطبيعي تبع اي
- 1:35مشروع رياكت جديد ولو رحت عند النتيجه ها
- 1:38هي النتيجه فعليا الخاصه بهذا الكود راح
- 1:41ارجع مره ثانيه واللي راح اسويه اني راح
- 1:44اسوي قائمه بمجموعه من المهام اللي انا
- 1:47محتاج اني اشتغل عليها على سبيل المثال
- 1:49ففي هذا المكان بدل ترميز اكاديمي على
- 1:51سبيل المثال انا راح اجي واسوي دف جديد
- 1:54وبداخل هذا الديف بدي اعرف يو ال اللي هي
- 1:57ان اوردر ليست وبداخلها راح اعرف في ال اي
- 2:00مثلا الاول اللي هو راح يمثل اول مهمه
- 2:03مطلوبه مني مثلا راح اكتب دوينج ماي هوم
- 2:06ووركس على سبيل المثال وراح اسوي مهمه
- 2:09ثانيه هي راح اخليها مثلا ريدينج ابوك
- 2:13وبعدين راح اسوي وحده ثالثه راح اسميها
- 2:15مثلا ديين على سبيل المثال راح اسوي وده
- 2:19رابعه وهاي راح اخليها مثلا كلينينج ماي
- 2:22روم لو سويت سيف ورجعت مره ثانيه على
- 2:24النتيجه لاحظ انه طلع لي اياهم على انهم
- 2:27مجموعه من الايتمز مرتبه بداخل الان اوردر
- 2:31ليست طيب جميل المشكله فعليا انه هي
- 2:34الطريقه ما هي طريقه عمليه ليش لانه في كل
- 2:37مره انا محتاج اني اضيف شيء جديد انا
- 2:40محتاج اني ارجع واكتب هذا الل اي مره
- 2:44ثانيه واحدد بداخله ايش هو الشيء اللي انا
- 2:47بدي اياه مو بس هيك في مشكله ثانيه كذلك
- 2:51لها علاقه بقدش الكود مرين وقابل للتوسع
- 2:54او التعديل يعني نفرض مثلا انه الل اي
- 2:58الموجوده عندي هون لها ستايل معين معين
- 3:00فمثلا انا جيت قلت له انه لها الستايل
- 3:02التالي انه الباك جراوند تبعها راح يكون
- 3:05جرين بهاي الحاله راح تلاقي انه ها طلع لك
- 3:08على انها جرين فانا لازم اخذ هذا اللون او
- 3:12هذا الستايل واوحده لكل اللال اي لانه بده
- 3:15يكون تصميم الموقع اللي عندي هو تصميم
- 3:17موحد وبالتالي لازم يطلع بهذا الشكل الان
- 3:21لو بدي اغير لون الباك جراوند انا ممكن
- 3:24اغيره اقول له اورنج بس راح احتاج اغيره
- 3:27في كل الاماكن الاخرى لاحظ كيف انه
- 3:30التعديل على جزئيه معينه من اليو اي اللي
- 3:32بتعكس لي البيانات اللي هي بتمثل قائمه
- 3:35المهام اللي عندي فعليا تتطلب اني اروح
- 3:38واعدل على كل الل اي الاخرى طيب ايش الحل
- 3:42الحل اني افصل البيانات عن اليو اي بحيث
- 3:46اني احطهم مثلا في مصفوفه وبعدين اسوي فور
- 3:49لوب يمشي على هي المصفوفه وبناء عليها
- 3:52يروح يرجع لي هي البيانات على شكل الجي اس
- 3:55اكس لذلك اللي بقدر اسويه اني اجي مثلا في
- 3:58هذا المكان قبل ما اسوي جمله الريتن عشان
- 4:02يتعرف على اكواد الجافا سكريبت وقوله
- 4:04كونست مثلا وراح اكتب تاسك راح اسمي
- 4:07المتغير باسم تاسك ها راح تكون عباره عن
- 4:09مصفوفه بداخل ها المصفوفه راح احط مجموعه
- 4:12من العناصر فمثلا راح اخذ العنصر الاول
- 4:15اللي هو عباره عن دوين ماي هوم وورك وراح
- 4:17انقل كل ها التاسكات الى المصفوفه لاحظ
- 4:21الان انه صارت عندي كل التاسكات موجوده في
- 4:24المصفوفه اللي اسمها تاسك اللي راح اسويه
- 4:27الان بدل ما اني اكتب الاي في كل مره راح
- 4:30اسوي فور لوب يمشي عليهم عنصر ورا الثاني
- 4:33لكن هذا الفور لوب انا ما راح اكتبه كفور
- 4:36لوب مباشره وانما راح استدعي الداله اللي
- 4:40اسمها ماب اللي هي وحده من الهاير اوردر
- 4:43فانكشن اذا ما بتعرف ايش هي الهاير اوردر
- 4:46فانكشن فانا سويت درس مستقل عنها بيشرحها
- 4:48بشكل كامل وراح تلاقيه ضمن مصادر هذا
- 4:51الدرس عشان ترجع له وتفهمها بشكل كويس اذا
- 4:54ما مريت عليك سابقا لكن باختصار الهاير
- 4:57اوردر فانكشن هي عده انواع منها داله
- 5:00اسمها الماب داله الماب فعليا مثلها مثل
- 5:03غيرها من الهاير اوردر فانكشن هي بتسوي لك
- 5:06فور لوب يمشيلك على عناصر المصفوفه اللي
- 5:08عم تستدعي منها داله الماب بمعنى اخر انا
- 5:11راح اجي عند هذا المكان وراح اعرف متغير
- 5:14ثاني هالمره راح اقول له كونست ماي تاسك
- 5:19ليست على سبيل المثال عشان تعطيني انطباع
- 5:22انها المتعلقه باليو اي او بالجي اس اكس
- 5:25يساوي هذا ايش يساوي في نهايه الامر انا
- 5:28بدي ارج نفس المصفوفه ها بس اللهم بدل ما
- 5:32يكون مكتوب بداخلها بيانات فقط تناخ ها
- 5:36البيانات بداخل ها المصفوفه وتروح يتم
- 5:39تعبئتها بعناصر ال اي مثلا وبداخلها اكتب
- 5:43اسم الشيء اللي بدي اياه وبعدين انتقل على
- 5:46العنصر الثاني وهكذا الى اخره عشان اسوي
- 5:49هذا الشيء افضل شيء واكثر شيء مناسب اني
- 5:52استخدم داله ماب وراح تستخدمها بشكل جدا
- 5:55كبير في رياكت فلذلك راح اجي هون ققول له
- 5:58روح لي على المصفوفه اللي اسمها تاسك
- 6:01وبحكم انها مصفوفه فعندها الدوال الخاصه
- 6:03بالها اوردر فانكشن مثل الماب والفلتر
- 6:06والفا وغيرها بعدين راح اجي اقول لله
- 6:09سويلي ماب والماب ها عباره عن فانكشن
- 6:12تتلقى ك بارامتر فانكشن ثانيه مره ثانيه
- 6:16اذا هذا الشيء ملخبط ممكن تشوف الدرس
- 6:18المتعلق بالها اوردر فانكشن اللي راح
- 6:20تلاقيه ضمن مصادر هذا الدرس هاي الفانكشن
- 6:23هي عباره عن فانكشن راح اكتبها بهذا الشكل
- 6:26راح احطلها السهم بعدين الكيرلي براكت و
- 6:29راح اسمي بارامتر معين هذا البارامتر راح
- 6:32اسميه باسم تاسك يعني تاسك وحده طبعا انت
- 6:35حر بالاسم اللي بدك اياه هذا البراميتر
- 6:38فعليا في كل مره راح يمثل تاسك معينه على
- 6:42حسب اللوب اللي ماشي عليه فاول مره قيمته
- 6:45راح تكون دوين ماي هوم وورك ثاني مره راح
- 6:47تكون قيمته ريدين بوك ثالث مره ديين رابع
- 6:50مره راح يكون كلين ماي روم وعشان اثبتلك
- 6:53هذا الشيء لو جيت وقلت له مثلا هون كونول
- 6:56دوت لو لهذا التاسك خلينا نشوف ايش ايش
- 6:59راح يطلع راح اسوي سيف وارجع مره ثانيه
- 7:01افتح الكونسول واشوف النتيجه اللي طلعت لي
- 7:04لاحظ انه فعليا طبع لي التاسكات الموجوده
- 7:06عندي بهذا الشكل طيب الان داله ماب ايش
- 7:09فكرتها فكرتها انه بتمشي لك على كل
- 7:11العناصر وبترجع لك العنصر مثل ما هو
- 7:14بالاضافه الى تعديلات معينه انت بتحدد له
- 7:17اياها فانا هذا تماما اللي بدي اياه بدي
- 7:19ارجع العنصر مثل ما هو لكن التعديل اللي
- 7:22بدي اياه انه يكون في عندي اطار اللي هو
- 7:24اليو اي او الال اي اللي راح ابنيه كنت
- 7:27بالاتش تي ام ال يتم تعبئ
- 7:29هذا التاسك بداخله وبالتالي انت بتحدد ايش
- 7:32الاشياء اللي بدك ترجعها بمعنى اخر لو جيت
- 7:35وقلت له ريتيرن لهي التاسك الموجوده عندي
- 7:38هون وبعد ما خلصت استدعاء ها الداله بشكل
- 7:41كامل جيت وقلت له كونول دوت لوج للماي
- 7:45تاسكس ليست ايش راح يطلع لي راح يطلع لي
- 7:48اياها على انها مصفوفه لها نفس البيانات
- 7:50الموجوده بالتاسار فلو سويت الان ريفريش
- 7:53فلاحظ انه عم يطلع لي اياهم نفس العناصر
- 7:56الموجوده عندي في الاري اساسا فلو رجعت
- 7:58مثلا قلت له رجع لي التاسك وضيف لي عليها
- 8:02مثلا احرف من عندي لكل تاسك موجوده لو
- 8:05سويت سيف راح تلاقي انه فعليا راح رجع لي
- 8:08نفس التاسك بس ضف لي عليها ها الاحرف لكل
- 8:11تاسك موجوده عندي بحيث انها تطلع مابد
- 8:15بهذا الشكل الموجود طيب انا بدل ما اضيف
- 8:18عليها احرف او اسوي عليها لوجيك معين راح
- 8:21اقول له لا رجع لي اياها كتاس معباه بداخل
- 8:25ال اي المنت بمعنى اني راح افتح الاقواس
- 8:28العاديه تبع جي اس اكس وقول له سوي لي ال
- 8:31اي وبداخل هذا الال اي روح عبي لي التاسك
- 8:35لا تنسى ما بقدر اكتبها تاسك بهذا الشكل
- 8:38لاني لو كتبتها بهذا الشكل راح يعتبرها
- 8:40عباره عن نص عادي انا الان بداخل سياق
- 8:43الجي اس اكس او الاتش تي ام ال فلذلك عشان
- 8:46اطلع وارجع للجافا سكريبت لازم اجي اقول
- 8:49له ما بين الكيرلي براكتس الان لو سويت
- 8:52سيف ورجعت مره ثانيه عم حااول اني اطبعهم
- 8:54لاحظ كيف عم يطبع لي اياهم كانهم عباره عن
- 8:57اوبجكت وبالتالي لو فتحتهم راح يطلع لك
- 8:59اياه كانه اوبجكت كامل هذا الاوبجكت فعليا
- 9:02هو اللي بيمثل النت اللي بتقدر تعرضه على
- 9:04الشاشه طيب كيف بقدر اعرضه على الشاشه بكل
- 9:07بساطه انا الان في هذا المكان بدل ما اني
- 9:10اسوي الل اي هدول كلياتهم راح امسحهم وراح
- 9:14اقول له في هذا المكان راح افتح الكيرلي
- 9:17براكتس عشان احط متغير جافا سكريبت اللي
- 9:20هو فعليا هذا المتغير اللي اسمه ماي تاسك
- 9:23ليست وهذا المتغير هو اصلا ايش عباره عن
- 9:26مصفوفه تحتوي على مجموع من اكواد الجي اس
- 9:30اكس فلو جيت وحطيت المتغير هذا مباشره
- 9:34بهذا المكان حطيت ماي تاس ليست وسويت سيف
- 9:38ورجعت مره ثانيه لاحظ كيف طلعلي اياها
- 9:41بهذا الشكل حطلي التاسكات وعرض لي اياها
- 9:43بشكل مباشر فهي نفس النتيجه لكن الطريقه
- 9:47اللي كتبت فيها الكود صارت انظف وانظم
- 9:50بمراحل طبعا راح تلاحظ انه هون عم
- 9:56يقوللك دائما لما تسوي لوب وتبني مجموعه
- 10:00من العناصر باستخدام داله الماب وبعدين
- 10:03تعرضهم بهذا الشكل لازم كل عنصر من
- 10:06العناصر الموجوده عندك يكون له اتربيوت
- 10:10اسمها كي وها قيمه معينه بحيث تميز هذا
- 10:14العنصر عن اي عنصر اخر موجود عندك في
- 10:17المصفوفه وراح نتكلم ايش اهميه هذا الشيء
- 10:20لاحقا لكن مبدئيا هذا الجزء جدا مهم فانا
- 10:24عشان احل ها المشكله انا ممكن احول ها
- 10:26العناصر بدل ما تكون عباره عن سترنج بشكل
- 10:28مباشر لا اخليها عباره عن اوبجكت كيف يعني
- 10:32يعني اجي واحول كل ها العناصر الى اوبجكت
- 10:36لها اي دي معين هذا الاي دي مثلا راح يكون
- 10:39واحد اين 3 4 على سبيل المثال وبعدين لها
- 10:43تايتل وهذا التايتل راح يكون هو عباره عن
- 10:47الشيء الموجود هون فانا هون بدل ما اعرض
- 10:50التاسك لو سويت سيف طبعا راح يطلع لك
- 10:53مجموعه من المشاكل لانه فعليا هذا صار
- 10:55عباره عن اوبجكت كامل التاسك الواحد صار
- 10:57اوبجكت كامل فبدل ما اعرض التاسك لازم
- 10:59اقول له تاسك دوت تايتل بهذا الشكل لو
- 11:03سويت سيف ورجعت لاحظ انه طلع لي اياهم
- 11:06خليني اسوي ريفريش بس عشان انظف الكونسول
- 11:08مازال في عندك مشكله وايش هي المشكله عم
- 11:11يقوللك انكونتر ت تدرن وذا سيم كي هذا
- 11:14الكي مره ثانيه هدفه انه يميز كل تاسك او
- 11:18كل عنصر موجود عندك في الليست عن غيره فما
- 11:21بينفع يكون نفسه لذلك راح اخليه 1 2 3 4
- 11:26بهذا الشكل طيب هذا الكي ايش اهميته هذا
- 11:29اهميته عشان رياكت تستوعب ايش ترتيب
- 11:32العناصر واذا صار تعديل على عنصر معين
- 11:34تعرف بالضبط ايش هو هذا العنصر وعشان
- 11:37رياكت تعرف بالضبط ايش هو هذا العنصر لازم
- 11:39يكون له اي دي يميزه عن غيره وبالتالي لما
- 11:42يتعدل يكون سهل الاكتشاف من قبل رياكت هذا
- 11:46بس عشان تعرف ايش اللي عم يصير خلف
- 11:48الكواليس وليش دائما راح يطلع لك هذا
- 11:50الخطا اللي بيطلب منك انك تحدد الكي لما
- 11:53تسوي ليست سواء في رياكت ولا فيو ولا
- 11:56غيرها من اطر عمل جافا سكريبت وبالتالي
- 11:58هيجز جزئيه مهمه انها تذكر لازم دائما
- 12:01يكون عندك اي دي لكل ليست انت عم تحاول
- 12:04تعرضها وتسوي لها رندر كليست موجوده عندك
- 12:07فالان لو سويت سيف ورجعت مره ثانيه خليني
- 12:10نسوي ريفريش عشان اشوف لاحظ انه مازال عم
- 12:12يقوللي انكونتر تو تدرن ذا سيم كي والسبب
- 12:15انه انا هون اصلا ما عم عبي قيمه الكي
- 12:18اللي عم معطيه اياها فهي الاتربيوت اللي
- 12:20اسمها كي جدا مهمه ولازم تحدد له ايش اسم
- 12:23الخاصيه اللي راح تحتوي على هذا الكي فانا
- 12:26راح اقول له هون روح لي على كل انا عم
- 12:29امشي عليها من داخل الماب وتحديدا على
- 12:32الاي دي طبعا ممكن اسميه اي دي ممكن اسميه
- 12:35اي شيء ثاني لكن اسم الاتربيوت اللي هي كي
- 12:38لازم تضل كي عشان رياكت تفهم انه هذا اللي
- 12:41راح يميز كل الاي عن غيره فلو سويت سيف
- 12:45الان ورجعت مره ثانيه لاحظ انه الان
- 12:47الامور اشتغلت معي تمام لو سويت ريفريش
- 12:49لاحظ انه الاخطاء اختفت عندي وطلعي كل شي
- 12:52تمام ايش استفدت من هذا الشي اللي انا
- 12:53سويته اللي استفدت انه هذا ال اي والكود
- 12:57بصفه عامه صار مكتوب بطريقه اسهل في
- 13:01التعديل النتيجه ترى هي نفس النتيجه لكن
- 13:03الكود مختلف الان لو جيتوا قلت له ستايل
- 13:07وقلت له انه بدي يكون عنده لون خلفيه
- 13:10باللون الاخضر بهذا الشكل طبعا لا تنسى
- 13:13انك لازم تحط دبل كيرلي براكتس بهذا الشكل
- 13:16لو سويت سيف ورجعت مره ثانيه لاحظ انه
- 13:18كلهم اخذوا نفس لون الخلفيه مو بس هيك اي
- 13:21شيء بضيفه على هذا الل اي لنفرض اني قررت
- 13:24انه ما تكون اصلا ال اي انها بدها تكون
- 13:27ديف وبداخل هذا الديف انا ما بدي اعرض
- 13:30التاسك دوت تايتل مباشره بدي اعرضها بداخل
- 13:33اتش 1 بحيث انه يكون التاسك دوت تايتل
- 13:35بداخل هذا الاتش 1 ورجعت مره ثانيه لاحظ
- 13:38انه راح يطلع لك بهذا الشكل فلاحظ كيف صار
- 13:41عندي في سلاسه في التحكم والتعديل وانا
- 13:44بقدر اعدل في مكان واحد وهذا راح ياثر على
- 13:47كل شيء ها مو الفائده الوحيده الان عشان
- 13:50اضيف تاسك اضافيه لهي القائمه ترى انا
- 13:53ماني محتاج اني اروح اسوي لها يو اي مره
- 13:55ثانيه انا فقط محتاج اني اضيف عنصر جديد
- 13:59في هي المصفوفه فراح اسوي نسخ لهذا العنصر
- 14:02وطبعا اتاكد انه الاي دي يكون له مختلف
- 14:05لاني لو سويت سيف راح ترجع تطلع لي نفس
- 14:07المشكله اللي عم يقول لي فيها الاي دي
- 14:09متكرر وبالتالي رياكت ما راح تعرف تميز
- 14:12هذا العنصر عن غيره في حال تعديل وفي حال
- 14:14انها احتاجت انها تسوي رير رندر او اعاده
- 14:18عرض للعناصر فلذلك لازم هذا الاربعه يصير
- 14:21خمسه وبعدين هون ممكن احدد الشيء اللي بدي
- 14:24اياه مهما كانت ها التاسك فلو سويت سيف
- 14:27راح تطلع لي بشكل مباشر الموضوع سلس جدا
- 14:30ولو قررت اني احذف تاسك معينه انا بمسحها
- 14:34بكل بساطه وانتهى الموضوع هذا راح يمسح لي
- 14:37اياها بهاي السلاسل وبالتالي ها هي
- 14:39الطريقه اللي بتسوي فيها رندر لمجموعه من
- 14:41العناصر باستخدام الهاير اوردر فانكشن
- 14:44اللي هي فعليا كانها عباره عن لوب عم
- 14:46يمشيلك على البيانات اللي هي ممثله
- 14:49بمصفوفة
- 14:58بحيث انك ممكن تستفيد منها من داخل سياق
- 15:02الجي اس اكس وتعبي لك المصفوفه بشكل كامل
- 15:05وهذا الشيء اللي بيخلي لك الكود اكثر
- 15:07سلاسه واكثر قابليه للتعديل اتمنى ان شاء
- 15:10الله انه المشكله صارت واضحه وانه الحل
- 15:13باستخدام الليست كذلك صار واضح من خلال
- 15:16رياكت ونشوفكم ان شاء الله بالدرس
- 15:20الجاي
About this transcript
This page contains the full transcript of 18: Rendering List in React by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 2,361 words across 307 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.
What you can do with it
Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.
Free YouTube transcript tool
YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.