YT YouTube2Text

YouTube2Text → Transcripts → 14: إرسال ال JSX كـ Props إلى ال Component

14: إرسال ال JSX كـ Props إلى ال Component — Transcript

by أكاديمية ترميز · 2,138 words · 285 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

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

About this transcript

This page contains the full transcript of 14: إرسال ال JSX كـ Props إلى ال Component by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 2,138 words across 285 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.