React-Praxiskurs: Die Grundlagen
Stephan Haewß
Schau dir diesen Kurs und Tausende anderer Kurse an
Schau dir diesen Kurs und Tausende anderer Kurse an
Einheiten dieses Kurses
-
-
1.
Intro und worum geht es?
2:53
-
2.
Einrichtung der Entwicklungsumgebung
15:40
-
3.
Anatomie einer React App
10:46
-
4.
Exkurs ES6 Module
26:13
-
5.
JSX-Grundlagen
20:02
-
6.
Komponenten selbst schreiben
16:58
-
7.
JavaScript Ausdrücke in JSX
15:20
-
8.
Zustand speichern mit useStae
36:14
-
9.
Zählerkomponente mit Props
15:57
-
10.
Eingabefelder und dynamische Props
13:16
-
11.
Grundlegender Aufbau der Todo App
17:46
-
12.
Kommunikation zwischen Kind und Eltern Komponente
16:44
-
13.
Todo als erledigt markieren
19:14
-
14.
Stylen mit Emotion
36:58
-
15.
Gruppieren nach Erledigt Status
17:47
-
16.
Todos löschen
14:07
-
17.
DIVs sparen
4:42
-
18.
Speichern und Laden
17:34
-
19.
useEffect als Mounted Handler
28:40
-
20.
Fazit
11:13
-
-
- --
- Anfänger-Niveau
- Fortgeschrittenes Niveau
- Fortgeschrittenes Niveau
- Jedes Niveau
Von der Community generiert
Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.
21
Teilnehmer:innen
--
Projekte
Über diesen Kurs
In diesem Kurs werden die Grundlagen der Programmierung von Web-Apps mit dem Framework React erläutert. Nachdem mit einer einfachen Klick-Zähler-App die notwendigen Basics wie JSX, Event-Handler und Props erklärt werden, wird eine einfache aber funktionale Todo-App erstellt. Am Ende des Kurses seid Ihr in der Lage, einfache bis mittelkomplexe React-Apps zu erstellen und Euch die weiterführenden Themen selbst anzueignen.
Praxisnahes Kursprojekt
Die Projektaufgabe besteht darin, eine Mini-App zu erstellen, die nur eine Komponente enthält, welche aber mindestens den useState-Hook und ein Eingabefeld verwenden soll. Was die App genau macht, könnt Ihr Euch selbst überlegen, hier einige Beispiele:
- Es wird eine Begrüßung mit dem Namen ausgegeben, den man in einem Eingabefeld eingeben kann.
- Es wird zufällig Vor- und Nachname aus einer Listen von vorgegeben Namen erzeugt, die man selbst erweitern kann.
- Taschenrechner: es gibt drei Eingabefelder für Operand 1, Operator und Operand 2, nach Klick auf einen Button wird das Ergebnis ausgegeben
Ihr könnt auch andere Eingabeelemente wie Textarea oder Radio-Button verwenden, schaut in der React-Doku nach, wenn Ihr nicht sicher seid, wie man sie in React verwendet (Formulare in React).
Angehängt habe ich die beiden Apps, die wir im Kurs verwendet haben, so dass Ihr den Code noch einmal nachvollziehen könnt.
Um Eure Mini-Apps in die Projektgalerie hinzuzufügen, könnt Ihr einen Screenshot vom Code der Komponente machen (und von der App-UI im Browser am besten auch).Ich werde Euch dann Feedback zu Euren Projekten geben, Ihr könnt Euch natürlich auch gegenseitig Feedback geben.
Kursbewertung
Warum lohnt sich eine Mitgliedschaft bei Skillshare?
Nimm an prämierten Skillshare Original-Kursen teil
Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen
Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare
Lerne von überall aus
Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.
Ähnliche Kurse
