YT YouTube2Text

YouTube2Text → Transcripts → 5: فهم هيكلة مشاريع React

5: فهم هيكلة مشاريع React — Transcript

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

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

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

About this transcript

This page contains the full transcript of 5: فهم هيكلة مشاريع React by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 2,142 words across 289 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.