React Tutorial Teil 1: Kursübersicht, React, ReactDOM und JSX Gründe für die Popularität

Wir präsentieren Ihnen die ersten 5 Lektionen des React Anfängerkurses. Der ursprüngliche Englischkurs, der aus 48 Lektionen besteht, wird auf der Scrimba.com-Plattform veröffentlicht. Die Funktionen dieser Plattform ermöglichen es, während Sie dem Präsentator zuhören, die Wiedergabe manchmal anzuhalten und unabhängig voneinander in demselben Fenster, in dem die Demonstration durchgeführt wird, mit dem Code zu experimentieren. Der Kurs erschien uns interessant, wir beschlossen, ihn ins Russische zu übersetzen und in das Format traditioneller Veröffentlichungen umzuwandeln.



Wir glauben, dass dieser Kurs für alle nützlich sein wird, die, wie sie sagen, "nicht wissen, wie sie reagieren sollen", aber lernen wollen. Gleichzeitig ist es sehr aufwändig und zeitaufwändig, diesen Kurs in regelmäßige Veröffentlichungen umzuwandeln. Bevor wir eine endgültige Entscheidung über den Start dieses Projekts treffen, laden wir alle ein, den Kurs zu bewerten und an einer Umfrage über die Machbarkeit der Übersetzung teilzunehmen.

Lektion 1. Überblick über den Kurs und Empfehlungen für seine Entwicklung

→ Original

Willkommen zum React Fundamentals-Kurs. Mein Name ist Bob Ziroll. Ich werde Ihnen erklären, wie Sie Front-End-Projekte mit einem der beliebtesten Web-Frameworks der Welt erstellen. Ich arbeite seit vielen Jahren auf dem Gebiet der Computererziehung, insbesondere bin ich jetzt für die Organisation des Bildungsprozesses an der V School verantwortlich .

▍Über den Kursentwicklungsprozess

Im Laufe der Jahre, in denen ich Schulungskurse entwickelt habe, die allen helfen sollen, komplexe Dinge schnell zu meistern, habe ich meinen eigenen Lernansatz entwickelt, über den ich meiner Meinung nach nützlich sein werde.

Zunächst möchte ich darauf hinweisen, dass der einfachste und effektivste Weg, etwas zu lernen, darin besteht, keine Mühe und Zeit zum Üben zu sparen. Wenn Sie lernen möchten, wie man programmiert - je früher Sie anfangen, etwas selbst zu tun, und je öfter Sie es tun - desto höher sind Ihre Erfolgschancen.

Wenn ich Schüler der V-Schule vorstelle, gebe ich ihnen normalerweise das folgende Beispiel aus meinem eigenen Leben. Vor kurzem hat mich die Arbeit mit Holz angezogen. Ich las Bücher, schaute unzählige Videos auf YouTube und gab mir Werkzeuge. Aber ich konnte nichts Wertvolles tun, bis ich die Werkzeuge in meinen Händen nahm. Nur viele Stunden Arbeit mit einer Säge und Sandpapier, Kleben und Schrauben von Teilen ermöglichten es mir, näher an das Ziel heranzukommen. Tatsächlich ist die Entwicklung von allem nach dem gleichen Prinzip angeordnet. Willst du Reagieren lernen? Schreiben Sie den Code.

Die meisten Klassen in diesem Kurs enthalten Übungen. Es wird erwartet, dass Sie versuchen, sie selbst zu tun. Wenn Sie sich mit der Aufgabe des selbständigen Arbeitens vertraut gemacht haben und sofort mit der Beschreibung der Lösung fortfahren, wählen Sie tatsächlich den schwierigsten Weg, um React zu lernen. Warten Sie außerdem nicht, bis Ihnen das Üben angeboten wird - ergreifen Sie die Initiative und probieren Sie alles aus, was Sie lernen. Versuchen Sie, so viel wie möglich selbst mit dem Code zu arbeiten. Insbesondere wenn Sie Reagieren ein wenig beherrschen - erstellen Sie etwas, das Sie interessiert, erleben Sie alles, was Sie neugierig machen möchten. Auf diese Weise können Sie Probleme wie die " Tutorial-Hölle " vermeiden.

Ein weiterer wichtiger Punkt meines Ansatzes ist das Intervalltraining und die Wiederholung des behandelten Materials. Dies sind die wichtigsten Dinge, mit denen Sie sich wirklich daran erinnern können, was Sie lernen. Es wird nicht empfohlen, sich kopfüber auf das Studium des Kurses einzulassen. Dies ist der Weg zu dieser „Tutorial-Hölle“. Mit diesem Ansatz haben Sie das Gefühl, wirklich etwas gelernt zu haben, aber in Wirklichkeit können Sie sich einfach nicht daran erinnern, was Sie „gelernt“ haben.

Machen Sie daher beim Durchlaufen der Materialien häufige Pausen. Hier geht es nicht um regelmäßige Pausen von 5-10 Minuten, sondern um etwas Ehrgeizigeres. Lernen Sie ein paar Prinzipien, üben Sie sie und machen Sie dann eine Pause für einen Tag. Wenn Sie zum Kurs zurückkehren, ist es sehr nützlich, die bereits untersuchten Materialien zu wiederholen. Mit diesem Ansatz wird es natürlich länger dauern, den Kurs zu meistern, aber dies wirkt sich äußerst positiv auf Ihr Lernen aus.
Lassen Sie uns nun kurz besprechen, was Sie lernen, wenn Sie diesen Kurs beherrschen.

▍Struktur und Voraussetzungen

Hier ist eine Liste der Hauptthemen des Kurses:

• Die Komponenten. Apropos Reagieren, eine Diskussion über das Konzept der Komponenten kann nicht vermieden werden. Komponenten in React sind der Hauptbaustein zum Erstellen von HTML-Snippets, die zur Wiederverwendung geeignet sind. Und fast alles andere, worüber wir sprechen werden, hängt damit zusammen, wie diese Komponenten zum Erstellen von Webanwendungen verwendet werden.
• JSX. Dies ist eine JavaScript-Syntaxerweiterung, mit der Sie Komponenten mithilfe der Funktionen von HTML und JavaScript erstellen können.
• Stilisierung von Bauteilen. Das Styling verleiht den Komponenten ein attraktives Aussehen.
• Eigenschaften und Datenaustausch in der Anwendung. Eigenschaften werden verwendet, um Daten zwischen Komponenten zu übertragen.
• Zustand. Komponentenstatusmechanismen werden zum Speichern und Verwalten von Daten in einer Anwendung verwendet.
• Ereignisbehandlung. Mit Ereignissen können Sie interaktive Beziehungen zu Anwendungsbenutzern herstellen.
• Methoden des Komponentenlebenszyklus. Mit diesen Methoden kann der Programmierer verschiedene Ereignisse beeinflussen, die mit Komponenten auftreten.
• Laden Sie Daten von externen APIs mithilfe des HTTP-Protokolls herunter.
• Mit Formularen arbeiten.

Um in diesem Kurs produktiv zu sein, müssen Sie HTML, CSS und JavaScript (ES6) kennen.

Lektion 2. Schulungsprojekte

→ Original

Während des Abschlusses dieses Kurses entwickeln Sie Bildungsprojekte. Schauen Sie sich einige davon an.

Unsere erste Entwicklung wird eine Standard-TODO-Anwendung sein.


Todo Anwendung

Es mag etwas langweilig aussehen, aber im Laufe seiner Entwicklung werden sich viele Möglichkeiten ergeben, über die wir im Kurs sprechen werden. Sie können auf die Elemente in der Aufgabenliste klicken, sie als abgeschlossen markieren und sehen, wie sich ihr Erscheinungsbild ändert.


Markierte Fälle in der TODO-Anwendung

Und hier ist unser Kursprojekt - ein Meme-Generator.


Meme Generator

Wenn Sie mit dieser Anwendung arbeiten, werden Texte in die Felder Top Text und Bottom Text eingegeben, die jeweils in den oberen und unteren Teil des Bildes fallen. Durch Klicken auf die Schaltfläche Gen wählt das Programm zufällig ein Meme-Bild aus der entsprechenden API aus und fügt Text hinzu. Hier ist ein Beispiel für die Funktionsweise dieser Anwendung:


Bereit Meme

Lektion 3. Warum reagieren und warum lohnt es sich zu lernen?

→ Original

Warum React verwenden, wenn Sie ein Webprojekt in reinem JavaScript entwickeln können? Wenn Sie an Webentwicklung interessiert sind, haben Sie vielleicht gehört, dass Sie mit React sehr schnelle Anwendungen erstellen können, deren Leistung über die mit nur JavaScript erreichbare Leistung hinausgeht. Dies wird durch die Verwendung der Technologie in React erreicht, die als virtuelles DOM bezeichnet wird. Wir werden nicht auf Details zu Virtual DOM eingehen. Wenn Sie diese Technologie besser kennenlernen möchten, können Sie sich dieses Video ansehen.

Im Moment reicht es für uns zu wissen, dass Virtual DOM Webanwendungen dabei unterstützt, viel schneller zu laufen, als wenn sie reguläres JS verwenden würden. Ein weiterer wirklich großer Vorteil, den React uns bietet, ist die Möglichkeit, Webkomponenten zu erstellen, die für die Wiederverwendung geeignet sind. Betrachten Sie ein Beispiel.

Wir haben ein Standard- navbar Element aus der Bootstrap-Bibliothek.


Navigationsleiste

Wenn Sie Bootstrap noch nicht verwendet haben, wissen Sie, dass dies nur eine CSS-Bibliothek ist, die Webentwicklern wunderschön gestaltete Elemente bietet. Es gibt ungefähr vier Dutzend Codezeilen, alles sieht ziemlich umständlich aus, das Navigieren in einem solchen Code ist nicht einfach. Wenn Sie all dies in eine HTML-Seite aufnehmen, die bereits viele Dinge enthält, wird der Code einer solchen Seite einfach mit verschiedenen Designs überladen.

Mit React-Webkomponenten können Sie HTML-Code-Schnipsel aufnehmen, sie als separate Komponenten anordnen und statt dieser Schnipsel zur Seite spezielle HTML-Tags in die Seitenstruktur aufnehmen. In unserem Fall reicht es aus, anstatt vierzig Zeilen HTML-Markup zur Seite hinzuzufügen, eine Komponente, die dieses Markup enthält, in die Komposition aufzunehmen. Wir haben es MySweetNavbar .


Komponentenansatz für Web Forming

Sie können eine solche Komponente beliebig benennen. Wie Sie sehen können, ist das komponentenbasierte Seitenlayout viel einfacher zu lesen. Der Entwickler sieht sofort die Gesamtstruktur einer solchen Seite. In diesem Fall befindet sich, wie Sie am Inhalt des <body> , oben auf der Seite eine Navigationsleiste ( MainContent ), in der Mitte der Hauptinhalt ( MainContent ) und unten auf der Seite eine Fußzeile ( MySweetFooter ).

Darüber hinaus verbessern Komponenten nicht nur die Codestruktur von HTML-Seiten. Sie sind auch zur Wiederverwendung geeignet. Was ist, wenn mehrere Seiten dieselbe Navigationsleiste benötigen? Was ist, wenn sich solche Panels auf verschiedenen Seiten geringfügig voneinander unterscheiden? Was tun, wenn auf vielen Seiten dasselbe Bedienfeld verwendet wird und Sie Änderungen daran vornehmen müssen? Ohne einen Komponentenansatz ist es schwierig, diese und viele andere Fragen angemessen zu beantworten.

Ein weiterer Grund für die Beliebtheit von React ist die Tatsache, dass Facebook diese Bibliothek entwickelt und unterstützt. Dies bedeutet zumindest, dass React ständig von qualifizierten Programmierern bearbeitet wird. Die Popularität von React und die Tatsache, dass das Projekt Open Source ist, das auf GitHub veröffentlicht wurde, bedeutet auch, dass viele Entwickler von Drittanbietern zu dem Projekt beitragen. All dies erlaubt uns zu sagen, dass React in absehbarer Zukunft leben und sich entwickeln wird.

Wenn man über React spricht und insbesondere darüber, warum es sich lohnt, diese Bibliothek zu erkunden, muss man sich an den riesigen Arbeitsmarkt erinnern, der mit dieser Bibliothek verbunden ist. Heute sind React-Spezialisten ständig gefragt. Wenn Sie React mit dem Ziel studieren, einen Job in der Front-End-Entwicklung zu finden, bedeutet dies, dass Sie auf dem richtigen Weg sind.

Lektion 4: Entwicklungsumgebung, ReactDOM und JSX

→ Original

Hier werden wir darüber sprechen, wie Sie mit ReactDOM eine einfache React-Anwendung erstellen und einige wichtige Punkte zu JSX ansprechen. Bevor wir jedoch mit dem Code arbeiten, wollen wir uns überlegen, wo dieser Code ausgeführt werden soll.

▍ Entwicklungsumgebung

Um mit React-Code zu experimentieren, ist es möglicherweise am besten, eine vollwertige lokale Entwicklungsumgebung bereitzustellen. Zu diesem Zweck können Sie auf das kürzlich veröffentlichte React.js- Material verweisen: eine intuitive Anleitung für Anfänger , insbesondere auf den Abschnitt React Application Development Practices. Um die Experimente zu starten, müssen Sie nämlich eine neue Anwendung mit create-react-app , dann den lokalen Entwicklungsserver starten und mit der Bearbeitung des Codes beginnen. Wenn es sich um die einfachsten Beispiele handelt, kann ihr Code direkt in die Standarddatei index.js werden, wobei der darin enthaltene Code entfernt oder index.js wird.

Der Inhalt der Datei index.html in dem von create-react-app erstellten Projekt entspricht dem Inhalt in den Beispielen, die in diesem Kurs bereitgestellt werden. Insbesondere sprechen wir über das Vorhandensein des <div> -Elements mit dem Bezeichner root auf der Seite.

Eine andere Option, die normalerweise für einige sehr einfache Experimente geeignet ist, ist die Verwendung von Online-Plattformen wie codepen.io. Hier ist zum Beispiel ein Demo-Projekt der React-Anwendung von Dan Abramov. Wenn Sie ein Codepen-Projekt für Experimente mit React vorbereiten, müssen Sie die React- und React react-dom Bibliotheken damit verbinden. Klicken Sie dazu oben auf der Seite auf die Schaltfläche Settings , gehen Sie zum JavaScript Abschnitt im angezeigten Fenster und stellen Sie eine Verbindung zum Projekt her, nachdem Sie sie gefunden haben unter Verwendung des eingebauten Suchsystems die erforderlichen Bibliotheken).

Es ist möglich, dass Sie zum Experimentieren die Funktionen von Scrimba bequem nutzen können. Dazu können Sie einfach die Seite für die entsprechende Lektion öffnen. Links zu diesen Seiten finden Sie unter den Überschriften mit Nummern und Berufsnamen.

▍Erstes Programm

Es ist zu beachten, dass wir in unseren Beispielen die Funktionen von ES6 (ES2015) verwenden werden. Daher ist es für Sie sehr ratsam, diese zu navigieren. Insbesondere wird zum Importieren der react in das Projekt die folgende Konstruktion verwendet:

 import React from "react" 

Und so können Sie die react-dom Bibliothek importieren:

 import ReactDOM from "react-dom" 

Jetzt werden wir die render() ReactDOM , um etwas auf dem Bildschirm anzuzeigen:

 ReactDOM.render() 

Wenn Sie ein von create-react-app erstelltes Projekt für Experimente verwenden index.js , index.js Datei index.js (in VSCode geöffnet) wie in der folgenden Abbildung dargestellt aus.


Code in index.js eingeben

Wenn ein Entwicklungsserver ausgeführt wird und im Browser die Seite http://localhost:3000/ geöffnet ist, werden Fehlermeldungen index.js wenn Sie eine solche index.js . Dies ist in dieser Phase der Arbeit völlig normal, da wir das System noch nicht darüber informiert haben, was und wo wir den Befehl render() anzeigen möchten.

Tatsächlich ist es jetzt an der Zeit, sich mit dem Code zu befassen, den wir gerade geschrieben haben. Hier haben wir nämlich React in das Projekt importiert und dann - ReactDOM -, damit die Funktionen dieser Bibliothek verwendet werden können, um etwas auf dem Bildschirm anzuzeigen.

Die render() -Methode akzeptiert zwei Argumente. Das erste wird das sein, was wir herausbringen wollen, und das zweite wird der Ort sein, an dem wir etwas herausbringen wollen. Wenn dies in Form von Pseudocode geschrieben ist, stellt sich Folgendes heraus:

 ReactDOM.render( ,  ) 

Was wir ausgeben möchten, muss irgendwie an eine HTML-Seite angehängt werden. Der Code, den wir schreiben, wird in HTML-Elemente umgewandelt, die auf die Seite gelangen.

So könnte diese Seite aussehen.

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

Es gibt alle Grundelemente einer HTML-Seite, einschließlich des <link> -Tags und des <script> .

Wenn Sie die create-react-app , sieht die Seite index.html etwas anders aus. Insbesondere gibt es in seinem Code keinen Importbefehl index.js . Tatsache ist, dass beim index.js eines Projekts die Verbindung zwischen index.html und index.js automatisch hergestellt wird .

Beachten Sie das <div> -Element mit der root ID. Zwischen den öffnenden und schließenden Tags dieses Elements platziert React alles, was wir erstellen. Dieses Element kann als Container für unsere gesamte Anwendung betrachtet werden.

Wenn wir nun zur Datei index.js und zur ReactDOM render() ReactDOM , ist das zweite Argument, der Ort, an dem die Daten ausgegeben werden sollen, ein Verweis auf das Element <div> mit dem Bezeichner root . Hier verwenden wir gewöhnliches JavaScript. Danach sieht das zweite Argument der Render-Methode folgendermaßen aus:

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

Bei diesem Ansatz verwendet die render() -Methode das erste Argument und gibt das, was sie beschreibt, an den angegebenen Speicherort aus. Kommen wir nun zu diesem ersten Argument. Beginnen wir mit dem einfachen <h1> -Element. Und wie es normalerweise beim Schreiben des ersten Programms der Fall ist, fügen Sie den Text Hello world! ::

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

Wenn Sie jetzt die Browserseite aktualisieren, wird als Titel der ersten Ebene der angegebene Text angezeigt.


Das Ergebnis des ersten Programms

Hier haben Sie möglicherweise eine Frage, warum wir die Beschreibung des HTML-Elements an die Stelle setzen, an der das Argument der JavaScript-Methode erwartet wird. Schließlich wird JavaScript angesichts von so etwas wie <h1>Hello world!</h1> wahrscheinlich entscheiden, dass das erste Zeichen dieses Ausdrucks ein "weniger" -Operator ist, dann kommt natürlich der Variablenname als nächstes, dann der "mehr" -Vergleichsoperator ". JavaScript erkennt ein HTML-Element in dieser Zeichenfolge nicht und sollte es auch nicht.

React-Entwickler haben nicht nur eine Bibliothek erstellt, sondern auch eine spezielle Sprache namens JSX. JSX ist einer HTML-Variante sehr ähnlich. Außerdem werden Sie sehen, dass fast der gesamte JSX-Code fast vollständig mit dem mit seiner Hilfe erstellten HTML-Markup übereinstimmt. Es gibt natürlich Unterschiede zwischen JSX und HTML, und wir werden sie schrittweise diskutieren.

Wir haben eine ziemlich einfache und kurze Anweisung eingeführt, aber in den Eingeweiden von React passieren viele interessante Dinge, wenn sie ausgeführt werden. Diese Anweisung wird also in ihre JavaScript-Version konvertiert. Es wird HTML-Code generiert, obwohl wir nicht auf die Details dieses Prozesses eingehen. Aus diesem Grund müssen wir nicht nur React react-dom importieren, sondern auch in das Projekt react , da die React-Bibliothek genau das ist, was es uns ermöglicht, JSX zu verwenden und JSX-Konstrukte wie erwartet funktionieren zu lassen. Wenn wir den import React from "react" Zeile import React from "react" aus unserem Beispiel entfernen, die Skriptdatei speichern und die Seite aktualisieren, wird eine Fehlermeldung angezeigt. Insbesondere wird uns die 'React' must be in scope when using JSX react/react-in-jsx-scope React create-react-app mitteilen, dass Sie JSX nicht ohne Zugriff auf React verwenden können ( 'React' must be in scope when using JSX react/react-in-jsx-scope React 'React' must be in scope when using JSX react/react-in-jsx-scope ).

Tatsache ist, dass, obwohl React in unserem Beispiel nicht direkt verwendet wird, die Bibliothek für die Arbeit mit JSX verwendet wird.

Eine andere Sache bei der Arbeit mit JSX, auf die ich Sie aufmerksam machen möchte, ist, dass Sie keine JSX-Elemente rendern können, die nacheinander folgen. Angenommen, Sie müssen nach dem <h1> -Element das <p> -Element ausgeben. Versuchen wir, dieses Design zu verwenden:

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

Wenn Sie danach die Seite aktualisieren, wird eine Fehlermeldung angezeigt (in der create-react-app sieht es wie ein Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag ). Der Kern dieses Fehlers besteht darin, dass solche Elemente in ein anderes Element eingeschlossen werden sollten. Was sich am Ende herausstellen wird, sollte wie ein Element mit zwei darin verschachtelten Elementen aussehen.

Damit unser Beispiel funktioniert, schließen wir die <h1>Hello world!</h1><p>This is a paragraph</p> im <div> -Element:

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

Wenn Sie die Seite jetzt aktualisieren, sieht alles wie erwartet aus.


Zwei HTML-Elemente pro Seite

Es wird einige Zeit dauern, bis Sie sich an JSX gewöhnt haben. Danach ist die Verwendung viel einfacher und bequemer als die Arbeit mit HTML-Elementen mit Standard-JavaScript-Tools. Um beispielsweise das <p> -Element zu beschreiben und seinen Inhalt mit Standardwerkzeugen zu konfigurieren, benötigen Sie Folgendes:

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

Dann müssen Sie es mit dem Element verbinden, das sich bereits auf der Seite befindet. Dies ist ein Beispiel für eine imperative Programmierung, und dank JSX kann dasselbe in einem deklarativen Stil erfolgen.

Lektion 5. Workshop. ReactDOM und JSX

→ Original

In der letzten Lektion haben Sie ReactDOM und JSX getroffen, und jetzt ist es Zeit, dieses Wissen in die Praxis umzusetzen.

Wir werden alle praktischen Aufgaben wie folgt erledigen. Zunächst wird im Abschnitt mit der Überschrift Aufgabe die Aufgabe selbst angegeben, und möglicherweise werden im Abschnitt Tipps kurze Empfehlungen zur Umsetzung gegeben. Dann folgt der Abschnitt Lösung. Es wird empfohlen, dass Sie alle Anstrengungen unternehmen, um die Aufgabe selbst zu erledigen, und sich dann mit der angegebenen Lösung befassen.

Wenn Sie das Gefühl haben, nicht zurechtzukommen, kehren Sie zur vorherigen Lektion zurück, wiederholen Sie das entsprechende Material und versuchen Sie es erneut.

»Job

Schreiben Sie eine React-Anwendung, die eine Liste mit Aufzählungszeichen ( <ul> ) auf der Seite anzeigt. Diese Liste sollte drei Elemente ( <li> ) mit einem beliebigen Text enthalten.

▍Tipps

Zuerst müssen Sie die erforderlichen Bibliotheken in das Projekt importieren und dann eine davon verwenden, um die Elemente anzuzeigen, die mit JSX-Code auf der Seite generiert wurden.

Zusammenfassung

Nachdem Sie sich mit den ersten Lektionen des React-Kurses vertraut gemacht haben, bitten wir Sie, an der Umfrage teilzunehmen.

Vielen Dank für Ihre Aufmerksamkeit!



→ Teil 1: Kursübersicht, Gründe für die Beliebtheit von React, ReactDOM und JSX
→ Teil 2: Funktionskomponenten
→ Teil 3: Komponentendateien, Projektstruktur
→ Teil 4: übergeordnete und untergeordnete Komponenten
→ Teil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des Stylings
→ Teil 6: Über einige Funktionen des Kurses, JSX und JavaScript
→ Teil 7: Inline-Stile
→ Teil 8: Fortsetzung der Arbeit an der TODO-Anwendung, Vertrautheit mit den Eigenschaften von Komponenten
→ Teil 9: Komponenteneigenschaften
→ Teil 10: Workshop zum Arbeiten mit Komponenteneigenschaften und Styling
→ Teil 11: Dynamische Markup-Generierung und Map-Arrays-Methode
→ Teil 12: Workshop, dritte Phase der Arbeit an einer TODO-Anwendung
→ Teil 13: Klassenbasierte Komponenten
→ Teil 14: Workshop zu klassenbasierten Komponenten, Komponentenstatus
→ Teil 15: Komponentengesundheitsworkshops
→ Teil 16: Die vierte Phase der Arbeit an einer TODO-Anwendung, die Ereignisbehandlung
→ Teil 17: Fünfte Phase der Arbeit an einer TODO-Anwendung, Änderung des Status von Komponenten
→ Teil 18: Die sechste Phase der Arbeit an einer TODO-Anwendung
→ Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Die erste Lektion in bedingtem Rendern
→ Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
→ Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, bei der Daten aus externen Quellen heruntergeladen werden
→ Teil 23: Erste Lektion zum Arbeiten mit Formularen
→ Teil 24: Lektion der zweiten Form
→ Teil 25: Workshop zum Arbeiten mit Formularen
→ Teil 26: Anwendungsarchitektur, Container- / Komponentenmuster
→ Teil 27: Kursprojekt