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