React-Praxiskurs: Die Grundlagen
Stephan Haewß
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
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
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
12
apprenants
--
À propos de ce cours
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.
Projet de cours pratique
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.
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
Cours apparentés
