Freitag, 09:00 Uhr

Von 0 auf React

Laut einer Statistik von NPM hat React einen Marktanteil von 60 Prozent. Grund genug sich mit der Frontend-Bibliothek zu beschäftigen. In diesem Workshop tauchen wir in die Welt von React ein und entwickeln eine vollwertige Applikation. Vom Einsatz von JSX über den Aufbau und die Architektur von Komponentenhierarchien bis hin zur Serverkommunikation lernst Du alle wichtigen Facetten der beliebten Bibliothek kennen.

Außerdem erhältst Du einen Ausblick in das Universum von React, das die Navigation in einer Applikation, das Testen sowie erweiterte Methoden für das State-Management beinhaltet.

Vorkenntnisse:
* Grundwissen in JavaScript

Lernziele:
* Die Teilnehmerinnern und Teilnehmer erhalten einen Einblick in die Welt von React und sind in der Lage, erste Applikationen mit der Bibliothek umzusetzen.

Technische Anforderungen:

  • Bringen Sie bitte einen Laptop mit einer aktuellen Node.js-Version (>=12) mit.

  • Stellen Sie sicher, dass Sie NPM Pakete installieren können (z.B. npm install react) - gerade bei Verbindungen über Firmen-Proxys können hier Probleme auftreten.

  • Führen Sie eines der folgenden Kommandos aus (für das erste muss der Yarn-Package Manager installiert sein):

    • yarn create react-app workshop —typescript

    • npm create react-app workshop —typescript


Agenda:

ab 08.00 Registrierung und Begrüßungskaffee

09.00: Beginn

  • Eine Applikation Initialisieren

  • Die wichtigsten Konzepte von React

  • React und TypeScript

10.30 - 10.45: Kaffeepause

  • Klassenkomponenten

  • State und Props

  • Der Lebenszyklus einer Komponente

  • Funktionskomponenten

12.15 - 13.15: Mittagspause

  • Formulare in React

  • Styling - das gute Aussehen von Komponenten

  • Die Kontext-API

14.30 - 14.45: Kaffeepause

  • Serverkommunikation

  • Die Hook-API

ca. 16.30 Uhr: Ende

Sebastian Springer
(MaibornWolff)
@basti_springer

Sebastian ist Dozent für JavaScript, Sprecher auf Konferenzen und Autor. So weckt er die Begeisterung für professionelle Entwicklung mit JavaScript.