YT YouTube2Text

YouTube2Text → Transcripts → 8: مقدمة إلى ال JSX

8: مقدمة إلى ال JSX — Transcript

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

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

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

About this transcript

This page contains the full transcript of 8: مقدمة إلى ال JSX by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 1,697 words across 223 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.