YT YouTube2Text

YouTube2Text → Transcripts → 3: التجربة الأولى ل React

3: التجربة الأولى ل React — Transcript

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

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

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

About this transcript

This page contains the full transcript of 3: التجربة الأولى ل React by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 1,426 words across 190 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.