YT YouTube2Text

YouTube2Text → Transcripts → 114 : . مطابقة الشرح النظري و التطبيق العملي

114 : . مطابقة الشرح النظري و التطبيق العملي — Transcript

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

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

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

About this transcript

This page contains the full transcript of 114 : . مطابقة الشرح النظري و التطبيق العملي by أكاديمية ترميز, generated from the public captions YouTube serves with the video. The transcript has 1,775 words across 252 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 choose a caption track available on the video.

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, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.