YT YouTube2Text

YouTube2Text → Transcripts → 17: Conditional Rendering in React

17: Conditional Rendering in React — Transcript

by أكاديمية ترميز · 1,907 words · 254 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00السلام عليكم حياكم الله بالدرس ال 17 من
0:02سلسله دروس رياكت جي اس وبهذا الدرس راح
0:05نتكلم عن مفهوم الكونديشن ريندر لكن عشان
0:08نفهم الموضوع بالبدايه خلينا نفهم ايش هو
0:11الريندرينج اساسا الريندرينج باختصار هو
0:14عباره عن عمليه اظهار الاكواد المرئيه على
0:18الشاشه بمعنى اخر لما انت تكتب اكواد جي
0:21اس اكس تيجي رياكت بتاخذ ها الاكواد اللي
0:24انت كتبتها وبتحول لك اياها لعناصر مرئيه
0:27على الشاشه فعليا هي بتحولها الى العناصر
0:30بيفهمها البراوزر والبراويز
0:35من اكواد مكتوبه في الايديتور الى عناصر
0:38مرئيه هي اللي نحن بنسميها فعليا باسم
0:41الريندرينج وبالتالي بتقدر تعتبر انه
0:44جزئيه الريتن اللي بتلاقيها في اي كومبونت
0:47وبتكتب بداخلها الجي اس اكس كانه هو الجزء
0:51الاساسي المهم اللي بيمثل موضوع
0:54الريندرينج والشيء اللي بيحصل في هذاك
0:56الوقت هو متعلق في الوقت اللي بيصير فيه
0:59الريندرينج او عمليه الرندر او اظهار
1:01العناصر على الشاشه وبالتالي لما انا بقول
1:04الكونديشن رندر انا بقصد فيها الرندر
1:07الشرطيه بمعنى انه اذا تحقق شرط معين انا
1:11بدي اكواد الجي اس اكس هي فعليا يتم
1:15تحقيقها او عرضها على الشاشه واذا ما تحقق
1:18هذا الشرط انا ما بدي اكواد الجي اس اكس
1:20هي تطلع على الشاشه او تطلع اكواد جي اس
1:23اكس مختلفه وهذا اللي راح نتكلم عنه في
1:26هذا الدرس عشان نبدا نشتغل لنفترض انه في
1:30عننا المثال التالي انا هي الازرار
1:32الموجوده عندي في هذا المكان ما بدي اياها
1:34دائما تنعرض انا راح يكون عندي متغير هذا
1:37المتغير اسمه شو كاتيجوري اذا كانت قيمته
1:41ترو فوقتها بدي اعرض الازرار الخاصه فيها
1:44واذا كانت قيمته فولس فانا ما بدي اطلع
1:46الازرار الموضوع في واقع الامر بحكم انه
1:49عم نستخدم الجي اس اكس اللي هو عباره عن
1:52طريقه بتخلط فيها اكواد الجافا سكريبت مع
1:55الاتش تي ام ال فهو بسيط الى حد جدا كبير
1:58وواضح الى حد جدا كبير كبير اذا انت بتعرف
2:00العبارات الشرطيه فانت في نهايه الامر فقط
2:03راح تكتب اكواد جافا سكريبت وبناء عليها
2:05تقرر ايش الجي اس اكس اللي راح يطلع منها
2:07فانا هون عم اطلع ها السايد منيو بشكل
2:10كامل اللي هي بتحتوي على كل الازرار اللي
2:12طالعه عندك اللي بتمثل الكاتيجوري اللي
2:15راح اسويه انا فعليا اني راح اعرف متغير
2:18هذا المتغير ممكن اعرفه بداخل الفانكشن
2:20تبع الاب او ممكن اعرفه حتى براته لكن
2:24خليني اجي اعرف هذا المتغير بداخلها على
2:26سبيل المثال وهذا المتغير راح اخليه كونست
2:29وبمعنى ادق هو ثابت ما هو متغير وراح
2:32اسميه باسم شو كاتيجوري وراح اخلي قيمته
2:36تساوي ترو فانا بناء على قيمه هذا المتغير
2:39بدي احدد هل بدي اطلع الكاتيجوري الموجوده
2:42عندي ولا لا وعشان اسوي هذا الشيء بكل
2:44بساطه قبل ما احدد اني بدي اطلع السايد
2:47منيو الموجوده عندي هون انا بقدر استخدم
2:50العبارات الشرطيه طبعا انا ما راح اقدر
2:52استخدم العبارات الشرطيه في هذا المكان
2:54واجي اقول له اف وبعدين اكتبها كاني عم
2:57اكتب جافا سكريبت هذا الكلام ما راح يشت
2:59يشتغل ليش لانه المكان اللي عم اكتب فيه
3:02الكود انا عم اكتبه في سياق الاتش تدي ام
3:05ال طيب ايش الحل هل نحطهم مثلا بداخل
3:09الكيرلي براكتس عشان يتعرف عليهم على انه
3:11جافا سكريبت ممكن لكن المشكله انه ما راح
3:14يكون في مساحه انك تكتب العباره الشرطيه
3:16وتحط مجموعه من الاسطر غير ان العباره
3:19الشرطيه اصلا فيها كيرلي براكتس وبالتالي
3:22ممكن تتداخل مع الكيرلي براكتس الاساسيه
3:24فما راح ينفع معك الموضوع لذلك انا ممكن
3:27احدد اصلا هذا السكشن اللي راح يطلع هون
3:30من داله اخرى بترجع لي جي اس اكس بمعنى
3:33اخر انا بدل ما اني ارجع السايد منيو هي
3:36بشكل مباشر انا ممكن اجي اعرف داله واجي
3:39اقول له راح يكون عندي فانكشن وهي
3:42الفانكشن هي عباره عن الاب سايد منيو
3:46ولاحظ اني سميتها باسم كابيتال ليش لانه
3:49هي الفانكشن في نهايه الامر راح تكون
3:51عباره عن كومبونت انا بستخدمه بعدين راح
3:53افتح القوس وراح اسكر هذا القوس وافتح
3:55الكيرلي براكتس اللي راح اسويه انا الان
3:58اني راح اشيك على قيمه المتغير هذا لكن
4:01انتبه هذا المتغير وين معرف معرف بداخل
4:04الفنكشن اللي اسمها اب وبالتالي هو برا
4:07السكوب تبع هي الفانكشن وهاي الفانكشن ما
4:09بتقدر توصل له لذلك راح اعرفه برا الاب
4:12عشان اكون قادر على الوصول له وبعدين راح
4:15اجي اسوي التالي مبدئيا انا بس بدي احط
4:18السايد منيو مثل ما هي وبالتالي راح اسوي
4:20لها كنترول اكس وراح اجي هون عند الاب
4:22سايد منيو وراح اعدل الاسم لانه المفروض
4:25ما يكون في اي وهون راح اجي اقول له
4:26ريتيرن وراح افتح قوس واسكر وبداخله راح
4:29احط السايد منيو بهذا الشكل طبعا الان لو
4:32سويت سيف راح تلاقي انه السايد منيو كلها
4:34اختفت لانه فعليا انا ما عم سوي رندر لهي
4:37الداله او ما عم حط الاكواد تبع الجي اس
4:39اكس تبعها لذلك انا ممكن ارجع مره ثانيه
4:42بالمكان اللي كان عندي فيه السايد منيو
4:44واجي اقول له في هذا المكان تحديدا بدل ما
4:47تحط لي سايد منيو بشكل مباشر حط لي الداله
4:50اللي اسمها اب سايد منيو بهذا الشكل وراح
4:54اخليه سيلف كلوزين بهذا الشكل راح اسوي
4:56سيف وارجع مره ثانيه لاحظ انه رجع وطلع لي
4:59السايد منيو الان انا ليش خليت الوصول لها
5:02بشكل غير مباشر لاني بدي اسوي عباره شرطيه
5:05بناء عليها بدي احدد ايش هو الشيء اللي
5:08راح يصير له ريتيرن بمعنى اخر انا الان
5:11هون لما بكتب اكواد بهذا المكان انا عم
5:14اكتبه في سياق ايش في سياق الجافا سكريبت
5:17فبقدر اكتب عباره شرطيه بشكل مباشر لكن
5:21بداخل جمله الريتن وتحديدا بداخل اقواس هي
5:25انا فعليا بكون عم اكتب اتش تدي ام ال او
5:27فعليا الجي اس اكس وبالتالي انا ما بقدر
5:30استخدم العبارات الشرطيه بالطريقه
5:32الاعتياديه في هذا المكان لذلك اللي راح
5:34اقول له اياه انه الريتن هذا راح يكون
5:37كونديشنال بمعنى انه راح يكون شرطي فراح
5:39اقول له اذا كان المتغير اللي اسمه شو
5:43كاتيجوري يساوي ترو وبالتالي راح اقول له
5:45شو كاتيجوري يساوي ترو او ممكن احط شو
5:48كاتيجوري بشكل مباشر وقتها بتروح بترجع لي
5:52السايد منيو بهذا الشكل والا فبقدر ارجع
5:57شيء ثاني فراح اسوي ريتير مره مره ثانيه
6:00وافتح القوس وبداخله ممكن احط اي جي اس
6:03اكس انا بدي اياه فمثلا بيجي بقول له مثلا
6:05خليني احط ديف واسكر هذا الديف ويكون هذا
6:08الدف فاضي فلما اسوي سيف الان وارجع مره
6:11ثانيه طبيعي راح تطلع لك ليش لانه قيمه
6:14الشو كاتيجوري فعليا هي عباره عن ترو لكن
6:18راح اغير الشو كاتيجوري الان وراح اخلي
6:21قيمتها بحيث تكون فولس وراح ارجع مره
6:24ثانيه لاحظ انه اختفت عندي تماما لانه هذا
6:27بيرجع لي ديف فاضي وانا اذا حابب اني ارجع
6:31شيء فاضي اساسا فانا ترى ماني محتاج اني
6:33احط ديف فاضي انا بقدر اقول له ريتيرن نل
6:37والنول راح يتم ترجمتها بشكل تلقائي على
6:40انه هي عباره عن شيء فاضي في الاتش تي ام
6:42ال فلو رجعت مره ثانيه راح تلاقي انه كل
6:44شيء شغال معك تمام بدون اي مشاكل ولو رجعت
6:47قيمه المتغير هذا الى ترو فراح تلاقي انه
6:50فعلا راح ترجع وتطلع لك بالشكل الموضح
6:52عندك وبالتالي ها هي الطريقه اللي نحنا
6:54بنستخدم فيها العباره الشرطيه خلينا ناخذ
6:57مثال ثاني مثلا لنف افترض انه اذا كان
7:00اصلا الاسم تبع الكاتيجوري المرسل الى
7:05البوتون فاضي بها الحاله انا ما بدي اعرض
7:08البوتون بمعنى اخر انا لما بجي عند السايد
7:11منيو ها اللي هي موجوده هون انا عم رسل
7:14هذا التايتل اللي هو هون مكتوب الاكثر
7:16قراءه وهون المقالات المميزه الى اخره بس
7:19انا بقدر اسوي اصلا تاج بوتون بهذا الشكل
7:22وما ارسل اي تايتل اخلي التايتل على سبيل
7:25المثال فاضي او حتى ما ارسل التايتل بشكل
7:28كامل فلو سويت سيف الان ورجعت لاحظ انه عم
7:31يطلعي هذا البوتون لكن هذا البوتون فاضي
7:34طيب انا ممكن من داخل التاج بوتون استخدم
7:37الكونديشن رندر بنفس الطريقه بمعنى اني
7:40ممكن اروح بداخله ها هي الفانكشن اللي عم
7:43ترجع لي الجي اس اكس تبع البوتون بقدر
7:45اقول له مو دائما سويي ريتيرن لهذا الجي
7:48اس اكس بدي اشيك على التايتل اللي تم
7:51ارساله ك بروبس وفي نهايه الامر البروبس
7:54هي عباره عن ايش هي عباره عن بارامتر هي
7:56عباره عن متغيرات في الجافا سكريبت
7:59وبالتالي بقدر اطبق عليها العبارات
8:01الشرطيه فبقدر اجي اقول له هون اف تايتل
8:05يساوي مثلا نل وحتى ممكن اضيف عليها
8:09احتمال اخر اور التايتل هذا يساوي على
8:13سبيل المثال سترنج لكن سترنج فاضي بها
8:16الحاله اللي بدي اسويه هو عباره عن ريتيرن
8:19نول لا تطلعلي البوتون من الاساس وفي حال
8:22ما تحقق هذا الشرط وما صار الريتن راح
8:25ينتقل الى الريتن الاخر وبالتالي انا ماني
8:27محتاج به الحاله اسوي الس لانه تذكر انه
8:30الريتن اصلا بيوقف استدعاء الداله عند
8:33المكان اللي صار فيه الريتن فهي كافيه
8:35فعليا فلو رجعت الان راح تلاقي انه هذا
8:38البوتون اللي ما كان عنده تايتل صار بوتون
8:41مخفي وما عاده موجود ولو رجعت مره ثانيه
8:44عند السايد منيو وقلت له هالمره راح اعطيه
8:46تايتل مثلا وهذا التايتل راح يكون اي شيء
8:49بشكل عشوائي وبعدين سويت سيف راح تلاقي
8:52انه هذا البوتون رجع طلع عندك وحتى لو
8:55قررت انك تحط التايتل وتشيل السترين تخليه
8:58فاضي وسويت سيف راح يخفي لك البوتون مره
9:01ثانيه لانه حتى حاله الاسترنج الفاضي انا
9:04فعليا عم شيك عليها وبناء عليها بروح برجع
9:07نول في الجي اس اكس وبالتالي ها هي
9:10الطريقه اللي بنستخدم فيها العبارات
9:12الشرطيه عشان نحدد ايش اجزاء الكود اللي
9:15تظهر وايش الاجزاء اللي تختفي او ايش
9:17الاجزاء البديله اللي تظهر عوضا عنها في
9:20حاله تحقق شروط معينه لكن فعليا في طريقه
9:23ثانيه اللي هي عن طريق استخدام التيرن
9:26اوبريتر التيرن اوبريتر هي عباره عن عباره
9:29شرطيه مختصره جدا بتساعدك لما بتكون عم
9:33تتعامل مع الجي اس اكس او لما بدك تسوي
9:35عرض لجزئيات من الجي اس اكس او الاتش تي
9:38ام ال بشكل شرطي فانا بدل ما اسوي العباره
9:42الشرطيه ها كامله واشيك على التايتل ترى
9:44انا بقدر امسحها وبعدين مثلا هون هذا
9:47البوتون كامل انا ممكن احطه بداخل ديف
9:50وراح
9:59اوبريتر بهذا الشكل اني افتح الكيرلي
10:01براكتس وبعدين اسكر الكيرلي براكت بداخلها
10:04بسال السؤال اللي بدي اياه فمثلا بسال هل
10:08التايتل على سبيل المثال يساوي نول او
10:12تايتل يساوي فراغ بعدين بحط علامه استفهام
10:16فاذا كان جواب الشرط هذا ترو راح يتحقق
10:19الجزء الاول اللي راح احطه هون فانا بحط
10:21جزئين ويفصل ما بينهم نقطتين راسيت فالجزء
10:25الاول اللي راح احطه هون راح اقول له طلع
10:28لي ديف ضي بهذا الشكل والجزء الثاني اللي
10:31راح يكون هون راح اطلع هذا البوتون بشكل
10:33كامل فراح اسوي له كات وراح احطه في هذا
10:36المكان لو سويت سيف ترى ها الطريقه اللي
10:39انا كتبت فيها هي طريقه مقبوله تماما
10:41ولاحظ اني هالمره نقلت العباره الشرطيه من
10:45سياق الجافا سكريبت برا جمله الريتن الى
10:48انها تكون مضمنه بداخل الجي اس اكس طيب
10:51ايش اللي صار انا فعليا عم شيك من خلال
10:54التيرن اوبريتر اذا كان التايتل يساوي نول
10:57او التايتل يساوي فراغ وبناء عليه اذا
11:00تحقق الشرط يعني بمعنى انه اذا تحقق احد
11:03الاجزاء من هذول العبارتين فراح يروح
11:06يستدعي لي الجزئيه الاولى اللي هو انه
11:08يطلع لي ديف فاضي ونتيجه لذلك راح تلاقي
11:11انه اذا كان التايتل يساوي نول فراح يطلع
11:14لك شيء فاضي كانه ما هو موجود لكن في
11:17الحاله الثانيه اذا ما تحقق هذا الشرط راح
11:20ينتقل الى الجزئيه اللي ما بعد النقطتين
11:23راسيت اللي هي ها الجزئيه الموجوده هون
11:26اللي هو انه يطلع لي بوتون له هذا التايتل
11:29واله تشلدرن على حسب الشكل اللي انا بسويه
11:33هذا البناء واستخدام التيرن اوبريتر جدا
11:36شائع لما بنتعامل مع رياكت وتحديدا مع
11:38الجي اس اكس لانه بيساعدك على كتابه
11:41عبارات شرطيه ما بين سطور الجي اس اكس
11:44اساسا وهذا شيء جدا مفيد وبيسهل عليك
11:47العمل بشكل جدا كبير وبالتالي لو رجعت راح
11:49تلاقي انه النتيجه فعلا مثل ما هي ولو
11:52رجعت مره ثانيه على السايد منيو وحطيت
11:54تايتل معين وسويت سيف راح يطلع لك الجزئيه
11:57الاخرى اللي هي جايه بعد نقطتين راسيت في
12:00حال لم يتحقق هذا الشرط اللي هو انه طلعلي
12:03البوتون اذا كان التايتل ماه نل وكذلك
12:07التايتل ما كان عباره عن سترنج فاضي هذا
12:09فيما يخص الكونديشن رندر وكيف بيشتغل في
12:12رياك جي اس اتمنى ان شاء الله ان كان
12:14الشرح واضح ونشوفكم ان شاء الله بالدرس
12:17الجاي

About this transcript

This page contains the full transcript of 17: Conditional Rendering in React by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 1,907 words across 254 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.