React-Praxiskurs: Die Grundlagen
Stephan Haewß
Watch this class and thousands more
Watch this class and thousands more
Lessons in This Class
-
-
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
-
-
- --
- Beginner level
- Intermediate level
- Advanced level
- All levels
Community Generated
The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.
12
Students
--
Projects
About This Class
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.
Hands-on Class Project
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.
Class Ratings
Why Join Skillshare?
Take award-winning Skillshare Original Classes
Each class has short lessons, hands-on projects
Your membership supports Skillshare teachers
Learn From Anywhere
Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.
Related Classes
