React Tutorial Part 1: نظرة عامة على الدورة التدريبية ، React ، ReactDOM ، و JSX أسباب الشعبية

نقدم لك أول 5 دروس من دورة تدريب React للمبتدئين. يتم نشر دورة اللغة الإنجليزية الأصلية ، التي تتكون من 48 درسًا ، على منصة Scrimba.com. تتيح إمكانيات هذا النظام الأساسي ، أثناء الاستماع إلى مقدم العرض ، إيقاف التشغيل مؤقتًا بشكل مستقل ، وفي نفس الإطار الذي يتم فيه إجراء العرض التوضيحي ، قم بتجربة الرمز. كانت الدورة مثيرة للاهتمام بالنسبة لنا ، قررنا ترجمتها إلى اللغة الروسية وتحويلها إلى تنسيق المنشورات التقليدية.



نعتقد أن هذه الدورة ستكون مفيدة لكل من "لا يعرف كيفية الرد" ، كما يقولون ، ولكنه يريد أن يتعلم. في الوقت نفسه ، يتطلب الأمر الكثير من الوقت والوقت لتحويل هذه الدورة إلى منشورات منتظمة ، لذلك ، قبل اتخاذ قرار نهائي بشأن إطلاق هذا المشروع ، ندعو الجميع لتقييم الدورة والمشاركة في دراسة استقصائية حول جدوى ترجمتها.

الدرس 1. نظرة عامة على الدورة والتوصيات لتطويره

→ الأصل

مرحبًا بكم في دورة React Fundamentals. اسمي Bob Ziroll ، وسأخبرك عن كيفية إنشاء مشاريع الواجهة باستخدام واحد من أكثر أطر الويب شعبية في العالم. لقد عملت في مجال تعليم الكمبيوتر لسنوات عديدة ، على وجه الخصوص ، أنا الآن مسؤول عن تنظيم العملية التعليمية في مدرسة V.

process حول عملية تطوير الدورة

على مدار سنوات من تطوير دورات تدريبية تهدف إلى مساعدة كل من يريد إتقان الأشياء المعقدة بسرعة ، لقد طورت منهجي الخاص في التعلم ، والذي أعتقد أنه سيكون من المفيد التحدث عنه.

بادئ ذي بدء ، أود أن أشير إلى أن الطريقة الأسهل والأكثر فعالية لتعلم أي شيء هي ألا تدخر جهداً ووقتاً للممارسة. إذا كنت تريد أن تتعلم كيف تقوم بالبرمجة - كلما بدأت في فعل شيء بنفسك ، وكلما قمت بذلك في كثير من الأحيان - كلما زادت فرص نجاحك.

عادة ، عندما أقدم طلاب مدرسة V ، أعطيهم المثال التالي من حياتي الخاصة. لقد انجذبت مؤخرا للعمل مع الخشب. قرأت الكتب ، وشاهدت مقاطع فيديو لا حصر لها على YouTube ، وأعطاني الأدوات. لكنني لم أستطع أن أفعل أي شيء يستحق حتى التقطت الأدوات في يدي. ساعات قليلة فقط أمضيت العمل مع المنشار وورق الصنفرة ، سمحت لي أجزاء الإلتصاق والشد بالاقتراب من الهدف في الواقع ، يتم ترتيب تطوير كل شيء على نفس المبدأ. تريد أن تتعلم رد فعل؟ اكتب الكود

تحتوي معظم الفصول في هذه الدورة على تمارين. من المتوقع أن تحاول القيام بها بنفسك. إذا تعرفت على مهمة العمل المستقل ، فتابع فورًا وصف حلها ، فستختار في الواقع أصعب طريقة لتعلم React. بالإضافة إلى ذلك ، لا تنتظر حتى يُعرض عليك التمرين - خذ المبادرة وجرب كل شيء تتعلمه. حاول العمل مع الكود بنفسك قدر الإمكان. على وجه الخصوص ، عندما تتقن React قليلاً - ابتكر شيئًا تهتم به ، جرب كل شيء تود تجربته. هذا سيسمح لك بتجنب مثل هذه المشاكل مثل " الجحيم التعليمي ".

نقطة أخرى مهمة في نهجي هي التدريب الفاصل وتكرار المواد المغطاة. هذه هي أهم الأشياء التي تسمح لك أن تتذكر حقًا ما تتعلمه. لا ينصح بالتسرع في دراسة الدورة. هذا هو الطريق إلى "الجحيم التعليمي". مع هذا النهج ، تشعر بأنك تعلمت شيئًا ما حقًا ، لكن في الواقع ، لا يمكنك ببساطة تذكر ما تعلمته.

لذلك ، أثناء التنقل عبر المواد ، خذ فترات راحة متكررة. لا يتعلق الأمر بالفواصل الدورية من 5 إلى 10 دقائق ، ولكن يتعلق بشيء أكثر طموحًا. تعلم بضعة مبادئ ، وتمارس استخدامها ، ثم خذ قسطًا من الراحة ليوم واحد. عندما تعود إلى الدورة التدريبية ، سيكون من المفيد للغاية تكرار المواد التي تمت دراستها بالفعل. بالطبع ، مع هذا النهج ، سوف يستغرق الأمر مزيدًا من الوقت لإتقان الدورة ، ولكن سيكون لهذا تأثير مفيد للغاية على تعلمك.
الآن ، دعونا نناقش بإيجاز ما تتعلمه من خلال إتقان هذه الدورة.

ruct البنية والمتطلبات

فيما يلي قائمة بالموضوعات الرئيسية للدورة:

• المكونات. تحدث React ، لا يمكن تجنب مناقشة مفهوم المكونات. المكونات في React هي لبنة البناء الرئيسية لإنشاء قصاصات HTML مناسبة لإعادة الاستخدام. وكل شيء آخر سنتحدث عنه يرتبط بكيفية استخدام هذه المكونات لإنشاء تطبيقات الويب.
• JSX. هذا هو ملحق بناء جملة JavaScript الذي يسمح لك بإنشاء مكونات باستخدام إمكانيات HTML و JavaScript.
• تبسيط المكونات. التصميم يعطي المكونات مظهرًا جذابًا.
• الخصائص وتبادل البيانات في التطبيق. تستخدم الخصائص لنقل البيانات بين المكونات.
• الشرط. يتم استخدام آليات حالة المكون لتخزين البيانات وإدارتها في أحد التطبيقات.
• التعامل مع الحدث. تتيح لك الأحداث إقامة علاقات تفاعلية مع مستخدمي التطبيق.
• أساليب دورة حياة المكون. تسمح هذه الطرق للمبرمج بالتأثير على الأحداث المختلفة التي تحدث مع المكونات.
• قم بتنزيل البيانات من واجهات برمجة التطبيقات الخارجية باستخدام بروتوكول HTTP.
• العمل مع النماذج.

لكي تكون منتجًا في هذه الدورة التدريبية ، يلزمك معرفة HTML و CSS و JavaScript (ES6).

الدرس 2. مشاريع التدريب

→ الأصل

في عملية استكمال هذه الدورة ، ستقوم بتطوير مشاريع تعليمية. نلقي نظرة على بعض منهم.

سيكون تطويرنا الأول تطبيق TODO قياسي.


تطبيق تودو

قد يبدو مملًا بعض الشيء ، ولكن أثناء تطويره ، سيتم إشراك العديد من الفرص ، والتي سنتحدث عنها في الدورة التدريبية. يمكنك النقر فوق العناصر الموجودة في قائمة المهام ، ووضع علامات عليها مكتملة ، ومعرفة كيفية تغير مظهرها.


الحالات المحددة في تطبيق TODO

وهنا هو مشروعنا بالطبع - مولد ميمي.


ميمي مولد

عند العمل مع هذا التطبيق ، يتم إدخال النصوص في حقول Top Text Bottom Text ، والتي ستقع ، على التوالي ، في الأجزاء العلوية والسفلية من الصورة. من خلال النقر فوق الزر Gen ، يقوم البرنامج بشكل عشوائي بتحديد صورة meme من واجهة برمجة التطبيقات المناظرة وإضافة نص إليها. فيما يلي مثال على كيفية عمل هذا التطبيق:


ميمي جاهزة

الدرس 3. لماذا التفاعل ولماذا يستحق التعلم؟

→ الأصل

لماذا استخدم React إذا كنت تستطيع تطوير مشروع ويب في جافا سكريبت خالص؟ إذا كنت مهتمًا بتطوير الويب ، فقد تكون سمعت أن React يسمح لك بإنشاء تطبيقات سريعة للغاية يتجاوز أدائها ما يمكن تحقيقه باستخدام JavaScript فقط. يتم تحقيق ذلك باستخدام تقنية React التي تسمى Virtual DOM. لن ندخل في تفاصيل حول Virtual DOM ، إذا كنت ترغب في التعرف على هذه التكنولوجيا بشكل أفضل ، يمكنك مشاهدة هذا الفيديو.

في الوقت الحالي ، يكفي أن نعرف أن Virtual DOM يساعد تطبيقات الويب على تشغيل أسرع بكثير مما لو كانوا يستخدمون JS بانتظام. فائدة أخرى كبيرة حقًا يوفرها React هي القدرة على إنشاء مكونات ويب مناسبة لإعادة الاستخدام. النظر في مثال.

لدينا عنصر شريط navbar قياسي من مكتبة Bootstrap.


شريط التنقل

إذا لم تكن قد استخدمت Bootstrap من قبل ، فاعلم أن هذه مجرد مكتبة CSS توفر لمطوري الويب عناصر مصممة بشكل جميل. هناك حوالي أربعة أسطر من التعليمات البرمجية ، كل هذا يبدو مرهقًا إلى حد ما ، والتنقل في هذا الرمز ليس بالأمر السهل. إذا قمت بتضمين كل ذلك في صفحة HTML ، والتي تحتوي بالفعل على الكثير من الأشياء ، فسيتم تحميل رمز هذه الصفحة ببساطة على تصميمات مختلفة.

تتيح لك مكونات React Web اتخاذ مقتطفات من تعليمات HTML البرمجية ، وترتيبها كمكونات منفصلة ، وبدلاً من إضافة هذه المقتطفات إلى الصفحة ، قم بتضمين شيء مثل علامات HTML الخاصة في بنية الصفحة. في حالتنا ، بدلاً من إضافة أربعين سطرًا من علامات HTML إلى الصفحة ، يكفي تضمين مكون يحتوي على هذا الترميز في تركيبته. لدينا ما يسمى MySweetNavbar .


نهج المكون لتشكيل الويب

يمكنك تسمية مثل هذا المكون كما تريد. كما ترون ، تخطيط الصفحة المستندة إلى المكون أسهل في القراءة. يرى المطور فورًا الهيكل العام لمثل هذه الصفحة. في هذه الحالة ، كما ترون من محتويات <body> ، يوجد شريط تنقل ( MySweetNavbar ) في الجزء العلوي من الصفحة ، والمحتوى الرئيسي ( MainContent ) في منتصف الصفحة ، وتذييل ( MySweetFooter ) في أسفل الصفحة.

بالإضافة إلى ذلك ، لا تعمل المكونات على تحسين بنية كود صفحات HTML فقط. كما أنها مناسبة لإعادة الاستخدام. ماذا لو احتاجت عدة صفحات إلى شريط التنقل نفسه؟ ماذا لو كانت هذه اللوحات على صفحات مختلفة مختلفة قليلاً عن بعضها البعض؟ ماذا تفعل إذا تم استخدام نفس اللوحة في العديد من الصفحات ، وتحتاج إلى إجراء بعض التغيير في ذلك؟ دون استخدام نهج مكون ، من الصعب إعطاء إجابات مناسبة لهذه الأسئلة والعديد من الأسئلة الأخرى.

يمكن اعتبار سبب آخر لشعبية React حقيقة أن Facebook يقوم بتطوير ودعم هذه المكتبة. هذا ، على الأقل ، يعني أن React يتم التعامل معه باستمرار بواسطة مبرمجين مؤهلين. شعبية React ، وحقيقة أن المشروع مفتوح المصدر ، المنشور على GitHub ، يعني أيضًا أن العديد من مطوري الطرف الثالث يساهمون في المشروع. كل هذا يسمح لنا أن نقول أن React ، في المستقبل المنظور ، ستعيش وتتطور.

عند الحديث عن React ، وعلى وجه الخصوص ، لماذا تستحق هذه المكتبة الاستكشاف ، لا يسع المرء إلا أن يتذكر سوق العمل الضخم المرتبط بهذه المكتبة. اليوم ، المتخصصين React في الطلب الثابت. إذا درست React بهدف العثور على وظيفة في التطوير الأمامي ، فهذا يعني أنك على الطريق الصحيح.

الدرس 4: بيئة التطوير ، ReactDOM و JSX

→ الأصل

هنا سنتحدث عن كيفية إنشاء تطبيق React بسيط باستخدام ReactDOM ولمس بعض النقاط الرئيسية حول JSX. ولكن ، قبل أن نبدأ العمل مع الكود ، دعونا نتحدث عن مكان تشغيل هذا الكود.

▍ بيئة التطوير

لتجربة React-code ، ربما سيكون من الأفضل نشر بيئة تطوير محلية كاملة. للقيام بذلك ، يمكنك الرجوع إلى مادة React.js المنشورة حديثًا : دليل سهل الاستخدام للمبتدئين ، على وجه الخصوص ، إلى قسم ممارسات تطوير تطبيق React. وهي ، من أجل بدء التجارب ، تحتاج إلى إنشاء تطبيق جديد باستخدام create-react-app ، ثم بدء تشغيل خادم التطوير المحلي وبدء تحرير الكود. إذا كنا نتحدث عن أبسط الأمثلة ، فيمكن إدخال الكود الخاص بهم مباشرةً في ملف index.js القياسي ، أو إزالة الكود فيه أو التعليق عليه.

تتوافق محتويات ملف index.html في المشروع الذي تم إنشاؤه بواسطة create-react-app مع محتوياته في الأمثلة التي سيتم توفيرها في هذه الدورة التدريبية. على وجه الخصوص ، نحن نتحدث عن التواجد على صفحة العنصر <div> مع root المعرف.

هناك خيار آخر مناسب عادة لبعض التجارب البسيطة جدًا وهو استخدام منصات الإنترنت مثل codepen.io. على سبيل المثال ، إليك مشروع تجريبي لتطبيق React من Dan Abramov. إن جوهر إعداد مشروع Codepen للتجارب مع React هو توصيل مكتبات react-dom عليها به (يمكن القيام بذلك بالنقر فوق الزر " Settings في أعلى الصفحة ، والانتقال إلى قسم JavaScript في النافذة التي تظهر والاتصال بالمشروع ، بعد العثور عليها باستخدام باستخدام نظام البحث المدمج ، والمكتبات اللازمة).

من الممكن أن تكون ملائمًا لاستخدام قدرات Scrimba للتجريب. للقيام بذلك ، يمكنك ببساطة فتح الصفحة للدرس المقابل. يمكن العثور على روابط لهذه الصفحات أسفل العناوين مع أرقام وأسماء المهن.

▍ البرنامج الأول

تجدر الإشارة إلى أننا في أمثلةنا سوف نستخدم إمكانيات ES6 (ES2015) ، لذلك فمن المستحسن للغاية أن تتنقل فيها. على وجه الخصوص ، من أجل استيراد مكتبة react في المشروع ، يتم استخدام الإنشاء التالي:

 import React from "react" 

وهكذا يمكنك استيراد مكتبة react-dom :

 import ReactDOM from "react-dom" 

الآن سوف نستخدم render() ReactDOM لعرض شيء ما على الشاشة:

 ReactDOM.render() 

إذا قررت استخدام مشروع تم إنشاؤه بواسطة create-react-app للتجارب ، فإن ملف index.js الخاص به (فتح في VSCode) سيبدو كما هو موضح في الشكل التالي.


إدخال الرمز في index.js

إذا كان لديك خادم تطوير يعمل وكان المتصفح به http://localhost:3000/ page مفتوحًا ، فسوف تقوم بحفظ رسائل خطأ إذا قمت بحفظ index.js . هذا ، في هذه المرحلة من العمل ، أمر طبيعي تمامًا ، نظرًا لأننا لم نبلغ النظام بعد بما يتعلق وأين نريد عرض الأمر render() .

في الواقع ، حان الوقت الآن للتعامل مع الكود الذي كتبناه للتو. وهي ، هنا ، قمنا باستيراد React في المشروع ، ثم - ReactDOM - بحيث يمكن استخدام قدرات هذه المكتبة لعرض شيء ما على الشاشة.

تأخذ طريقة render() وسيطين. الأول هو ما نريد أن نخرجه ، والثاني سيكون المكان الذي نريد أن نخرج فيه بشيء ما. إذا كان هذا مكتوبًا في شكل رمز زائف ، فسيظهر ما يلي:

 ReactDOM.render( ,  ) 

يجب أن يتم ربط ما نريد إخراجه بطريقة ما بصفحة HTML. سيتم تحويل الكود الذي سنكتبه إلى عناصر HTML ستظهر على الصفحة.

إليك كيفية ظهور هذه الصفحة.

 <html>   <head>       <link rel="stylesheet" href="style.css">   </head>   <body>       <div id="root"></div>       <script src="index.js"></script>   </body> </html> 

هناك جميع العناصر الأساسية لصفحة HTML ، بما في ذلك العلامة <link> والعلامة <script> .

إذا كنت تستخدم تطبيق create-react-app ، index.html صفحة index.html مختلفة بعض الشيء. على وجه الخصوص ، في index.js لا يوجد index.js لاستيراد index.js . الحقيقة هي أنه عند إنشاء مشروع ، يتم الاتصال بين index.html و index.js تلقائيًا .

لاحظ العنصر <div> بمعرف root . بين علامات الفتح والإغلاق لهذا العنصر ، سوف يضع React كل شيء نقوم بإنشائه. يمكن اعتبار هذا العنصر حاوية للتطبيق بأكمله.

إذا عدنا الآن إلى ملف index.js وإلى ReactDOM render() ReactDOM ، ReactDOM الوسيطة الثانية ، وهي المكان الذي يجب أن يتم فيه إخراج البيانات ، إشارة إلى العنصر <div> root المعرف. سنستخدم هنا جافا سكريبت عادي ، وبعدها ستبدو الوسيطة الثانية لطريقة Render كما يلي:

 ReactDOM.render( , document.getElementById("root")) 

باستخدام هذا الأسلوب ، تأخذ طريقة render() الوسيطة الأولى وتقوم بإخراج ما تصفه للموقع المحدد. الآن دعونا ننكب على هذه الحجة الأولى. لنبدأ بالعنصر <h1> البسيط. وكما هو الحال عادة عند كتابة البرنامج الأول ، أضف النص Hello world! :

 ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root")) 

إذا قمت الآن بتحديث صفحة المتصفح ، فسيتم عرض النص المحدد ، كعنوان للمستوى الأول.


نتيجة البرنامج الأول

هنا قد يكون لديك سؤال حول سبب وضعنا وصف عنصر HTML في المكان الذي يتوقع فيه وسيطة طريقة JavaScript. بعد كل شيء ، من المحتمل أن يقرر JavaScript ، في مواجهة شيء مثل <h1>Hello world!</h1> ، أن الحرف الأول من هذا التعبير هو عامل "أقل" ، ثم ، من الواضح أن اسم المتغير يأتي بعد ذلك ، ثم مشغل المقارنة "المزيد" ". لا يتعرف JavaScript على عنصر HTML في تسلسل الأحرف هذا ، ويجب ألا يتعرف عليه.

لم ينشئ مطورو React مكتبة فحسب ، ولكن أيضًا لغة خاصة تسمى JSX. يشبه JSX اختلافًا كبيرًا في HTML. علاوة على ذلك ، سترى أن كل كود JSX تقريبًا يتزامن بالكامل تقريبًا مع ترميز HTML الذي تم تشكيله بمساعدة. هناك ، بالطبع ، اختلافات بين JSX و HTML ، وسنناقشها تدريجياً.

قدمنا ​​تعليمات بسيطة وقصيرة إلى حد ما ، ولكن في أحشاء React ، عندما يتم تنفيذه ، يحدث الكثير من الأشياء المثيرة للاهتمام. لذلك ، يتم تحويل هذه التعليمات إلى إصدار JavaScript الخاص بها ، يتم إنشاء تعليمات HTML البرمجية ، على الرغم من أننا لا ندخل في تفاصيل هذه العملية. هذا هو السبب في أننا بحاجة إلى استيراد ليس فقط react-dom ، ولكن أيضًا react في المشروع ، لأن مكتبة React هي بالضبط ما يسمح لنا باستخدام JSX وجعل أعمال JSX تعمل كما هو متوقع. إذا أزلنا import React from "react" سطر import React from "react" من مثالنا ، فقم بحفظ ملف البرنامج النصي وتحديث الصفحة ، وسيتم عرض رسالة خطأ. على وجه الخصوص ، سيخبرنا create-react-app بأنه لا يمكنك استخدام JSX دون الوصول إلى React ( 'React' must be in scope when using JSX react/react-in-jsx-scope ).

الحقيقة هي أنه على الرغم من عدم استخدام React مباشرة في مثالنا ، إلا أن المكتبة تستخدم للعمل مع JSX.

شيء آخر حول العمل مع JSX الذي أود لفت انتباهك إليه هو أنه لا يمكنك تقديم عناصر JSX التي تتبع بعضها البعض. افترض أنه بعد العنصر <h1> تحتاج إلى إخراج العنصر <p> . دعنا نحاول استخدام هذا التصميم:

 ReactDOM.render(<h1>Hello world!</h1><p>This is a paragraph</p>, document.getElementById("root")) // 

إذا بعد ذلك ، قم بتحديث الصفحة - سيتم عرض رسالة خطأ (في تطبيق create-react-app ، يبدو أنه Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag ). جوهر هذا الخطأ هو أن هذه العناصر يجب أن تكون ملفوفة في بعض العناصر الأخرى. ما سيظهر في النهاية يجب أن يبدو وكأنه عنصر واحد مع عنصرين متداخلين فيه.

لكي يعمل مثالنا ، نلتف <h1>Hello world!</h1><p>This is a paragraph</p> في العنصر <div> :

 ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root")) 

إذا قمت الآن بتحديث الصفحة ، فسيظهر كل شيء بالشكل المتوقع.


عنصرين HTML في كل صفحة

سيستغرق الأمر بعض الوقت للتعود على JSX ، ولكن بعد ذلك سيكون استخدامه أسهل بكثير وأكثر ملاءمة من العمل مع عناصر HTML باستخدام أدوات JavaScript القياسية. على سبيل المثال ، من أجل وصف عنصر <p> وتكوين محتوياته باستخدام أدوات قياسية ، ستحتاج إلى ما يلي تقريبًا:

 var myNewP = document.createElement("p") myNewP.innerHTML = "This is a paragraph." 

ثم تحتاج إلى توصيله بالعنصر الموجود بالفعل في الصفحة. هذا مثال على البرمجة الضرورية ، ونفس الشيء ، بفضل JSX ، يمكن القيام به بأسلوب تعريفي.

الدرس 5. ورشة العمل. ReactDOM و JSX

→ الأصل

في الدرس الأخير ، قابلت ReactDOM و JSX ، والآن حان الوقت لوضع هذه المعرفة موضع التنفيذ.

سنكمل جميع المهام العملية على النحو التالي. أولاً ، في القسم الذي يحتوي على عنوان المهمة ، سيتم إعطاء المهمة نفسها ، وربما في قسم "النصائح" ، سيتم تقديم توصيات مختصرة حول تنفيذها. ثم سوف يتبع قسم الحل. يوصى ببذل قصارى جهدك لإكمال المهمة بنفسك ، ثم التعامل مع الحل المقدم.

إذا كنت تشعر بأنك لا تتعامل ، فارجع إلى الدرس السابق ، وكرر المادة المناسبة وحاول مرة أخرى.

ob الوظيفة

اكتب تطبيق React يعرض قائمة ذات تعداد نقطي ( <ul> ) على الصفحة. يجب أن تحتوي هذه القائمة على ثلاثة عناصر ( <li> ) مع أي نص.

نصائح

أولاً ، تحتاج إلى استيراد المكتبات اللازمة إلى المشروع ، ثم استخدام واحدة منها لعرض العناصر التي تم إنشاؤها باستخدام بعض رموز JSX على الصفحة.

ملخص

الآن ، بعد التعرف على الدروس الأولى من دورة React ، نطلب منك المشاركة في الاستبيان.

شكرا لاهتمامكم!



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 7: الأنماط المضمنة
→ الجزء 8: مواصلة العمل على تطبيق TODO ، الإلمام بخصائص المكونات
→ الجزء 9: خصائص المكون
→ الجزء 10: ورشة عمل حول العمل مع خصائص المكون والتصميم
→ الجزء 11: توليد العلامات الديناميكية وطريقة صفائف الخريطة
→ الجزء 12: ورشة العمل ، المرحلة الثالثة من العمل على طلب TODO
→ الجزء 13: المكونات القائمة على الفصل
→ الجزء 14: ورشة عمل حول المكونات القائمة على الفصل ، وحالة المكون
→ الجزء 15: ورش العمل الصحية المكونة
→ الجزء 16: المرحلة الرابعة من العمل على طلب TODO ، التعامل مع الأحداث
→ الجزء 17: المرحلة الخامسة من العمل على تطبيق TODO ، وتعديل حالة المكونات
→ الجزء 18: المرحلة السادسة من العمل على طلب TODO
→ الجزء 19: طرق دورة حياة المكون
الجزء 20: الدرس الأول في التقديم الشرطي
→ الجزء 21: الدرس الثاني وورشة العمل حول التقديم الشرطي
→ الجزء 22: المرحلة السابعة من العمل على تطبيق TODO ، وتنزيل البيانات من مصادر خارجية
→ الجزء 23: الدرس الأول حول العمل مع النماذج
→ الجزء 24: نماذج الدرس الثاني
→ الجزء 25: ورشة عمل حول العمل مع النماذج
→ الجزء 26: بنية التطبيق ، نمط الحاوية / المكون
→ الجزء 27: مشروع المقرر