53 : Using (Link) To Navigate To Other Pages — Transcript
Full transcript
- 0:00السلام عليكم حياكم الله بالدرس ال 53 من
- 0:02سلسله دروس رياكت جي اس في الدرس السابق
- 0:04بدينا بالتعامل مع الرياكت راوتر وحددنا
- 0:07ايش هي الرات المختلفه اللي ممكن يتم
- 0:09زيارتها من خلال الموقع في هذا الدرس راح
- 0:12نشوف كيف انك من خلال الكومبوننت اللي
- 0:15اسمه لينك اللي بيوفر لك يا رياكت راوتر
- 0:17ممكن تحول اي شيء الى زر يتم الضغط عليه
- 0:20حيث ينقلك الى صفحه اخرى من خلال الرياكت
- 0:23راوتر هذا هو الكود اللي انتهينا عنده في
- 0:25الدرس السابق ولو جيت عند ها الصفحه راح
- 0:27تلاحظ انه هذا الشيء اللي راح يطلع لك في
- 0:30هذا المكان اول شيء انا بدي انظم هذول
- 0:32الازرار بس بحيث انهم يطلعوا بشكل افقي
- 0:34لذلك بدل ما اني احط يو ال انا ممكن
- 0:37اطلعهم كبتون اعتياديين فراح امسح اليو ال
- 0:40والال اي عشان ما يحط لي ها الدوتس وهذا
- 0:42التصميم وبالتالي انا مسحت اليو ال الان
- 0:45ولو رجعت هذا هو الشكل اللي طالع عندي
- 0:47جميل واللي ممكن اسويه بس اني اكبر حجم
- 0:49الخط بس عشان يكبر معي الزر لذلك راح احه
- 0:52الستايل بالنسبه لهذا الدف ككل راح يكون
- 0:54له الفونت سايز بحيث انه الفونت سايز هذا
- 0:58يكون مثلا 30 بكسل لو سويت سيف ورجعت مره
- 1:01ثانيه يبدو لي انه ما تاثروا فالظاهر انا
- 1:04لازم احط هذا الستايل عند كل بوتون او اني
- 1:06اخليه امبورتنت بشكل سريع انا ممكن اسوي
- 1:08نسخ لهذا الستايل واحطه لكل بوتون واسوي
- 1:11سيف وارجع لاحظ كيف طلع لي اياهم بهذا
- 1:14الشكل طيب اللي بدي اسويه مبدئيا انه اذا
- 1:17تم الضغط على هذا الزر تبع البوست انا بدي
- 1:19اياه ينقلني الى صفحه البوست مباشره لكن
- 1:22قبلها انا محتاج اني اعرف راوت اساسا
- 1:26لصفحه البوست فاذا ما كان في عندي اي شيء
- 1:29بوي لي هاندل لما المستخدم بزور سلاش بوست
- 1:33فما راح يستفيد اي شيء لذلك مهم جدا انك
- 1:35تعرف الرات بعدين تعرف الشيء اللي يربط لك
- 1:38ياه بهذا
- 1:41الراوترات لي راوت جديد هذا
- 1:45الراوترات بداخل الكومبوننت الكبير اللي
- 1:48اسمه راوتس لا تنسى وراح يكون له بروبرتي
- 1:50جدا مهمه اللي اسمها باث وهذا الباث راح
- 1:53يكون عباره عن سلاش بوست هذا الشيء راح
- 1:56يرجعلي المنت معين وهذا النت المعين راح
- 2:00يكون اسمه بوست ليست على سبيل المثال وراح
- 2:04اسويله سيلف كلوزين طبعا هذا البوست ليست
- 2:06لسه ما هو موجود عندي اساسا وبالتالي لازم
- 2:08اني انشئ في البدايه لذلك راح اروح عند
- 2:11الملفات هون وبعدين راح اقول له نيو فايل
- 2:14وهذا الفايل راح اسميه باسم بوست ليست دوت
- 2:18جي اس وكالعاده هذا راح يكون عباره عن
- 2:20فانكشن بترجعلي كومبونت وبالتالي راح اكتب
- 2:23الكود الخاص فيها وبداخل الريتن على سبيل
- 2:25المثال راح احط هذا الفراج مننت بعدين راح
- 2:28اسوي مثلا ديف وهذا الدف الواحد بيمثل لي
- 2:31بوست فراح يكون ال تايتل على سبيل المثال
- 2:33فراح حله هون راح يكون اتش 1 بعدين راح
- 2:37اكتب بوست تايتل وبعدين ممكن احطله
- 2:40براجراف وبداخله احط مجموعه من التفاصيل
- 2:43العشوائيه بهذا الشكل هذا راح يمثل لي
- 2:45بوست معين راح اسويله نسخ عشان اسوي بوست
- 2:48ثاني من داخل هذا البوست ليست الان راح
- 2:51اسويله سيف وراح اروح عند الابد جي اس
- 2:53اسوي له امبورت لذلك راح يجي يقوله امبورت
- 2:56بو لست البوست ليست راح اكون قادر اني
- 3:00استخدمها في هذا المكان لو سويت سيف الان
- 3:02ورجعت طبيعي ما راح يطلع لك اي شيء لحتى
- 3:05تروح وتغير الرابط الى سلاش بوست وبالتالي
- 3:09لاحظ الرابط الموجود عندي هون ولاحظ انه
- 3:12الان طلع لي هذول البوستين الموجودين عندي
- 3:15ممتاز راح ارجع مره ثانيه انا الان بدل ما
- 3:17اني اروح بطريقه يدويه بدي الضغط على هذا
- 3:20الزر هو اللي يوديني الى صفحه البوست لذلك
- 3:23راح ارجع وعشان اسوي هذا الشيء لازم اعرف
- 3:26وين الزر اساسا اللي بدي اتحكم فيه هذا هو
- 3:28الزر تحديدا تبع على البوست طيب ايش بسوي
- 3:31عشان اخليه ينقلني الى صفحه اخرى اللي
- 3:33بسويه اني بستخدم كومبونت موجود عندي كذلك
- 3:36في المكتبه اللي اسمها رياكت راوتر دوم
- 3:39هذا الكومبوننت اسمه لينك عشان اكون قادر
- 3:42اني استخدمه لازم اسوي له امبورت بنفس
- 3:44الطريقه اللي سويت فيها راوت راوتس لذلك
- 3:46ممكن اجي هون قول له فاصله وبعدين قول له
- 3:49جيب لي كذلك اللينك من الرياكت راوتر دوم
- 3:53هذا اللينك بتستخدمه كراب او كشيء بتغطي
- 3:57فيه العنصر اللي بدك اياه يكون عباره عن
- 4:00لينك يوديك لصفحه معينه فانا بدي هذا
- 4:03البوتون هو اللي يوديني لصفحه معينه لذلك
- 4:05لازم احطه بداخل هذا الكومبوننت اللي اسمه
- 4:07لينك راح افتح القوس بهذا الشكل احط لينك
- 4:10وبعدين راح احط البوتون بداخل هذا اللينك
- 4:14بهاي الطريقه الان لو سويت سيف فعليا لو
- 4:17رجعت مره ثانيه وضغطت على البوست طبيعي
- 4:19جدا ما راح يصير اي شيء ليش لانه في
- 4:22معلومه جدا مهمه مفقوده ولازم اني ازود
- 4:25هذا اللينك فيها اللي هو هذا اللينك لوين
- 4:28راح يوديني تحديدا فانا راح اقول له انك
- 4:31راح توديني الى سلاش بوست كيف بقول له هذا
- 4:35الشيء من خلال بروبرتي اسمها 2 مثل ما كنا
- 4:38نعرف انكور تاج في الاتش تي ام ال بعدين
- 4:41نحط بروبرتي اسمها اتش رف هون بعرف لينك
- 4:44ونستخدم بروبرتي او اتربيوت اسمها 2 لذلك
- 4:47راح اكتب 2 وبعدين راح احط يساوي وبعدين
- 4:50هون راح احدد وين راح يوديني فراح اقول
- 4:52لله وديني الى سلاش بوست راح اسوي سيف
- 4:55الان وارجع مره ثانيه لاحظ الان لو جيت
- 4:57وضغطت على هذا البوتون تبع بوست
- 5:00واداني الى صفحه البوست وراح تلاحظ انه
- 5:03كذلك الرابط عندك تغير الى سلاش بوست مثل
- 5:06ما هو واضح عندك جميل طيب الان انا بدي
- 5:09الهوم يرجع يرجعني لصفحه الهوم لذلك بنفس
- 5:12الطريقه انا ممكن اروح عند زر الهوم وايجي
- 5:15يقول له لينك وبعدين اغلاق اللينك لازم
- 5:19يكون بعد البوتون تبع الهوم عشان يكون
- 5:22محيط فيه الان تحول كل شيء بداخله الى
- 5:25لينك بيوديك لصفحه معينه بس عشان يشتغل
- 5:28لازم تحدد ايش هي الصفحه من خلال الروبرت
- 5:31اللي اسمها 2 لذلك راح يجي هون ققول له 2
- 5:34وبعدين راح عرف ايش هو الرابط اللي هو راح
- 5:36يكون سلاش هوم لكن فعليا انا ما عندي سلاش
- 5:40هوم انا عندي السلاش العادي اللي هو بدون
- 5:43ولا شيء هو اللي بيوديني للهوم فانا عندي
- 5:46خيارين ممكن اني اخليها السلاش العادي
- 5:48بهذا الشكل اسوي سيف برجع مره ثانيه الان
- 5:51لو ضغطت على الهوم رجعني على الهوم بيج
- 5:54وممكن كذلك اقول له ترى عادي يعني راح
- 5:56يكون عندي رابطين الرابطين وودوني لنفس
- 5:59الصف صفحه فبقدر نفس هذا الرات تماما
- 6:02انسخه واقول له كذلك السلاش هوم راح
- 6:05يوديني الكومبوننت اللي اسمه هوم عادي جدا
- 6:08فلذلك انا هون ممكن اقول له سلاش هوم بهذا
- 6:10الشكل فلو سويت سيف ورجعت مره ثانيه
- 6:13لاحظوا ضغطت على هوم حول لي اياه الى
- 6:15السلاش هوم لو رحت على البوست راح يرجعني
- 6:18للبوست لو رحت على الهوم راح يرجعني لوم
- 6:20طيب ماذا لو انا بدي اسوي زر هذا الزر ما
- 6:22يكون من ضمن الازرار يعني الموحده او
- 6:26المشتركه ما بين كل الصفحات الموجوده عندي
- 6:28في الاب كومبونت وان ما بدي اسوي زر مخصص
- 6:32موجود عندي في صفحه البوست عشان يوديني
- 6:34الى صفحه الهوم او خلينا نسويه في صفحه
- 6:37الهالو مثلا لذلك انا بكل بساطه بروح عند
- 6:40صفحه الهالو على سبيل المثال وهالمره ما
- 6:43راح اسوي زر على انه بتون راح
- 6:47اورجيكسيم وبالتالي راح اجي مثلا اعرف ديف
- 6:51وهذا الديف راح احط بداخله اتش 1 وراح
- 6:55اكتب في جو تو هوم بيج بهذا الشكل وهذا
- 7:00الدف كذلك راح اعطيه ستايل معين فراح اقول
- 7:03له انه الباك جراوند مثلا راح يكون باللون
- 7:06البرتقالي راح اعطيه شويه بادينج ممكن
- 7:09تكون مثلا 10 بكسلز وممكن اقول له انه
- 7:12البوردر ريديس راح تكون 20 بكسل مثلا لو
- 7:16سويت سيف بس عشان اشوف الشكل راح اروح
- 7:19ازور صفحه الهالو طبعا الزر هذا لسه ما
- 7:21بيوديني على الهلو لذلك انا محتاج اني احط
- 7:23الرابط لاحظ انه هذا هو فعليا الديف فانا
- 7:26بدي الضغط على هذا الديف يروح يرجعني
- 7:28للهوم بيج لذلك راح ارجع مره ثانيه وراح
- 7:31اسوي نفس الطريقه تماما لازم استخدم
- 7:34اللينك كومبونت لكن اللينك كومبونت ترى ما
- 7:37هو عباره عن شيء موجود عندك في الاتش تي
- 7:38ام ال او موجود عندك في رياكت وجاهز لازم
- 7:41تسوي لله استيراد من مكتبه رياكت راوتر
- 7:44دوم لذلك بنفس الطريقه راح اجي اقول له
- 7:48امبورت وبعدين راح احدد الشيء اللي بدي
- 7:51اسويله امبورت اللي هو عباره عن اللينك من
- 7:53وين بدي اسويله امبورت روم رياكت راوتر
- 7:57دوم بعدين راح اجي استخدم هذا اللينك بنفس
- 7:59الطريقه اللي شفناها سابقا فراح اخليه
- 8:01يحيط بهذا الدف كامل عشان اصير قادر على
- 8:05الانتقال لصفحه الهوم من اي مكان انا
- 8:07بضغطه من داخل هذا الدف لذلك راح يجي اقول
- 8:10له سويلي اللينك وبعدين خلي لي هذا اللينك
- 8:13يحيط بهذا الدف بهذا الشكل لو سويت سيف
- 8:17الان ورجعت لاحظ كيف طلع لي اياه على انه
- 8:20عباره عن لينك لو ضغطت عليه لاحظ انه ما
- 8:22عم يسوي اي شيء ايش السبب السبب اني ما
- 8:25حددت التو بروبرتي لذلك لازم ارجع احددها
- 8:29وقول له انه هذا راح يوديني الى السلاش او
- 8:33سلاش هوم فلو سويت سيف الان ورجعت مره
- 8:35ثانيه ضغطت على جو تو هوم بيج لاحظ انه
- 8:38رجعني الى الهوم بيج اخيرا خليني اسوي هذا
- 8:40الهلو بشكل سريع بنفس الطريقه انا ممكن
- 8:43اروح عند الاب دوجي اس وبعدين اخذ هذا
- 8:47اللينك كومبونت واخليه يحيط بهذا الزر
- 8:50بحيث انه يوديني الى وين الى سلاش هلو
- 8:53وبعدين راح اسكر هذا اللينك مع نهايه الزر
- 8:58الموجود عندي هون بهذا الشكل فلو رجعت مره
- 9:00ثانيه هلو بيوديني على صفحه الهلو البوست
- 9:03الهوم وهكذا فالان صرت قادر على التنقل ما
- 9:07بين الصفحات المختلفه الموجوده عندي في
- 9:10مشروع رياكت لكن ترى ها في نهايه الامر
- 9:13كلها عباره عن صفحه واحده فقط وعم يستبد
- 9:17لي الكومبوننت بين بعضهم البعض وهذا السبب
- 9:20اللي بيخلي اطر عمل جافا سكريبت
- 9:22البيرفورمانس تبعها افضل ها الجزئيه بس
- 9:24راح اعطيك اياها بشكل سريع في الوقت
- 9:27الحالي لكن في نهايه هذا سكشن راح اشرح لك
- 9:30بالتفصيل وبشكل نظري كيف اصلا عمليه
- 9:33الراوتينج عم تشتغل في رياكت مقارنه
- 9:36بعمليه الراوتينج الطبيعيه اللي بتكون في
- 9:38المواقع الطبيعيه او المواقع الغير معتمده
- 9:41على اطر عمل جافا سكريبت اتمنى ان شاء
- 9:43الله انه كان الشرح واضح ونشوفكم ان شاء
- 9:45الله بالدرس الجاي
About this transcript
This page contains the full transcript of 53 : Using (Link) To Navigate To Other Pages by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 1,568 words across 205 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.