Schaffe in kürzester Zeit den praktischen Einstieg in die Frontend-Entwicklung mit React
... und lerne, wie du mithilfe von JavaScript und dem React Framework schöne Frontends für deine Webanwendungen programmieren kannst, um deinen persönlichen Wert auf dem Arbeitsmarkt drastisch zu steigern.
Laufzeit des Kurses
ca. 13 Stunden
Benötigte Vorkenntnisse
HTML/CSS/JavaScript Kenntnisse
Das Frontend-Framework React ist weltweit eines der populärsten JavaScript Frameworks überhaupt.
Mithilfe von diesem kannst du sehr effizient schöne User-Interfaces entwickeln, weshalb es von Unternehmen auch stark nachgefragt wird.
In diesem Kurs wirst du den Umgang mit dem React Framework von 0 an lernen, sodass du danach in der Lage bist, deine eigene Web-Apps problemlos umzusetzen.
Genauer gesagt wirst du lernen:
All diese Kenntnisse wirst du "hands-on" anhand mehrerer Praxisprojekte erwerben, denn wir programmieren gemeinsam eine Zähl-App, eine Todo-App und eine Video-Player-App.
Wenn du also den Quereinstieg in die Programmierung planst, deine bereits bestehenden Programmier-Kenntnisse für einen neuen Job oder ein Job-Interview ausbauen möchtest, oder dich einfach nur hobbymäßig mit der Webentwicklung befassen möchtest, dann ist dieser Kurs perfekt für dich geeignet!
Inhaltsverzeichnis des Kurses
In diesem Modul erhältst du eine detaillierte Einführung in diesen Kurs, damit du weißt, was auf dich zukommt. Zudem wirst du auch direkt lernen, wie du deine erste React-App in nur wenigen Schritten aufsetzen kannst.
Diese Lektionen erwarten dich:
- [Video 1] Willkommen und Übersicht
- [Video 2] Was ist das besondere an React?
- [Video 3] Schnelleinstieg: Die erste React-App in wenigen Schritten
- [Video 4] Anatomie einer React-App
In diesem Modul erhältst du eine Auffrischung bezüglich für den Kurs benötigter ES6 Funktionalitäten.
Diese Lektionen erwarten dich:
- [Video 1] Let und const
- [Video 2] Destructuring
- [Video 3] Arrow-Functions
- [Video 4] ES-Module
In diesem Modul lernst du die Grundlagen von React kennen. Zudem entwickeln wir gemeinsam unser erstes Praxisprojekt, eine Zähl-App.
Diese Lektionen erwarten dich:
- [Video 1] HTML in JS: JSX
- [Video 2] Komponenten erstellen
- [Video 3] JavaScript-Ausdrücke in JSX
- [Video 4] Zustand speichern mit useState
- [Video 5] Zählerkomponente mit Props
- [Video 6] Eingabefelder und dynamische Props
In diesem Modul wirst du Schritt-für-Schritt lernen, wie du mit React eine komplette Todo-App umsetzen kannst.
Diese Lektionen erwarten dich:
- [Video 1] Grundlegender Aufbau der Todo-App
- [Video 2] Kommunikation zwischen Kind- und Eltern-Komponente
- [Video 3] Todo als erledigt markieren
- [Video 4] Stylen mit Emotion
- [Video 5] Gruppieren nach Erledigt-Status
- [Video 6] Todos löschen
- [Video 7] DIVs sparen
- [Video 8] Speichern und Laden
- [Video 9] useEffect als Mounted-Handler
- [Video 10] Todo-App Fazit
In diesem Praxisprojekt steigern wir den Schwierigkeitsgrad und setzen gemeinsam eine Video-Player-App um.
Diese Lektionen erwarten dich:
- [Video 1] Video-Player-App erstellen
- [Video 2] Video-Element kontrollieren mit useRef
- [Video 3] Neue Video-Player-Komponente mit Play/Pause/Stop
- [Video 4] Pause/Play kombinieren mit Zustand
- [Video 5] Video-Events für Play und Pause
- [Video 6] Video-Lautstärke-Regler
- [Video 7] Video-Position setzen
- [Video 8] Video-Länge anzeigen
- [Video 9] Playlist mit select
- [Video 10] Zurücksetzen bei src-Änderung mit useEffect
- [Video 11] Video-Liste als Array
- [Video 12] Neue Videos zur Liste hinzufügen
- [Video 13] Einträge aus Liste löschen
- [Video 14] Playlist abspielen
- [Video 15] Next/Previous Buttons
- [Video 16] Disable Next/Previous Buttons
- [Video 17] Speichern und Laden der Videos
In diesem Modul lernst du weitere wichtige fortgeschrittene Themen kennen.
Diese Lektionen erwarten dich:
- [Video 1] Eigene Hooks erstellen
- [Video 2] useImmer statt useState für einfache Änderungen des State
- [Video 3] Optimierung von Komponenten mit memo
- [Video 4] Optimierung von Komponenten mit useCallback
- [Video 5] Optimierung von Komponenten mit useMemo
In diesem umfangreichen Modul sehen wir uns das Thema "Externes State-Management" an.
Diese Lektionen erwarten dich:
- [Video 1] Einen Store mit MobX erstellen und mit React verbinden
- [Video 2] MobX-State-Tree (MST): Typisierter Zustandsbaum mit MobX-Technik
- [Video 3] Komplexeres Projekt mit MST: Oberste Ebene (Sections)
- [Video 4] Komplexeres Projekt mit MST: Selektion der Sections
- [Video 5] Komplexeres Projekt mit MST: Titel ändern
- [Video 6] Komplexeres Projekt mit MST: Units
- [Video 7] Komplexeres Projekt mit MST: Refactoring in Einzelkomponenten
- [Video 8] Komplexeres Projekt mit MST: MediaItems zum Store hinzufügen
- [Video 9] Komplexeres Projekt mit MST: MediaItems Eigenschaften bearbeiten
- [Video 10] Komplexeres Projekt mit MST: MediaItems hinzufügen und löschen
- [Video 11] Komplexeres Projekt mit MST: Store speichern und laden
In diesem Modul ziehen wir abschließend noch ein Fazit.
Diese Lektionen erwarten dich:
- [Video 1] Fazit und Ausblick
Das sagen unsere Kunden
Was du bekommst
97€
Nach dem Durcharbeiten des Kurses besitzt du ... | |
|---|---|
Die Fähigkeit, eigenständig Frontends mit JavaScript und dem React Framework zu entwickeln | |
Ein tiefgreifendes Verständnis für das Entwickeln von Webanwendungen | |
Auf dem Arbeitsmarkt sehr gefragte Entwicklerfähigkeiten | |
Praxiserfahrung aufgrund der umfassenden Praxisprojekte | |
Nach dem Durcharbeiten des Kurses besitzt du ...
Ab sofort kannst du von überall aus lernen.
Wir präsentieren: Die Programmieren Starten App!
Innerhalb der App können alle Kursvideos auch auf dein Gerät heruntergeladen werden, sodass du auch ohne Internetverbindung von überall aus lernen kannst.
Häufig gestellte Fragen
Du benötigst für diesen Kurs Grundkenntnisse in HTML, CSS und JavaScript.
Der Kurs besteht insgesamt aus knapp 13 Stunden Videomaterial. Du kannst dieses Videomaterial also technisch gesehen an einem Tag durcharbeiten. Um die im Kurs gelernten Konzepte wirklich zu verinnerlichen, empfehlen wir eine Bearbeitungszeit von 7 - 14 Tagen.
Wir bieten zu jedem unserer Kurse eine 14 Tage Geld-zurück-Garantie an. Solltest du also nach 14 Tagen keine Fortschritte an deinen Programmierfähigkeiten erkennen, dann erhältst du dein komplettes Geld vollkommen zurückerstattet. Du kannst den Kurs also ohne Risiko testen.
Über unsere Web-Lernplattform können die Videos nicht heruntergeladen werden. Es ist also eine Internetverbindung von Nöten, um den Kurs ansehen zu können.
Seit neustem kannst du dir sowohl im Google Play Store als auch im Apple App Store unsere Programmieren Starten App herunterladen. Dadurch kannst du nun als optionale Möglichkeit auch über die App auf unsere Lernplattform zugreifen. Die App bietet den Vorteil, dass diese für mobile Endgeräte optimiert ist und die Videos innerhalb der App heruntergeladen werden können. Dadurch können die Kursvideos auch von unterwegs aus ohne aktive Internetverbindung angesehen werden.
Sobald du den Kurs erworben hast, kannst du lebenslang darauf zugreifen.
Ja, es handelt sich um eine einmalige Zahlung. Sobald du den Kurs erworben hast, steht dieser dir lebenslang innerhalb deines Accounts zur Verfügung. Auch alle zukünftigen Updates des Kurses werden kostenlos für dich freigeschaltet.
Nein, sollten im Laufe der Zeit neue Module zum Kurs hinzugefügt werden, so erhältst auch du automatisch Zugriff darauf. Du musst nichts weiter dafür tun und es fallen auch keine weiteren Kosten an.