ReactJS Schulung
Schulungsziel
Nach diesem Seminar verfügen die Teilnehmer über die Informationen, eine Anwendung mit ReactJS zu erstellen, einen Überblick über die Architektur einer clientseitigen komponentenorienten Webanwendung incl. der Anbindung externer REST-basierter Dienste z.B. einer Datenbank.
Zielgruppe
Dieses Seminar richtet sich an Applikationsentwickler die clientseitige Anwendungen basierend auf HTML5 und JavaScript bzw. TypeScript mit ReactJS entwickeln möchten. Für diesen Kurs sollten alle Teilnehmer neben guten HTML5, CSS3 Grundkenntnissen auch JavaScript bzw. TypeScript Kenntnisse mitbrigen, optional können diese als zusätzliche Module eingefügt werden.
Entwicklungsumgebung
- Windows 10 / 11 mit Visual Studio 2015, 2017 bzw. Visual Studio Code
- Linux mit Visual Studio Code
- [optional:] ASP.NET oder NodeJS für die Realisierung des Beispiel Backends
- HTML5, CSS3 und JavaScript oder TypeScript
- NodeJS, Webpack 5 oder ViteJS
Methodik
Das Seminar besteht aus einem theoretischen Vortrag und Präsentation mittels Folien gemischt mit Beispielen und Demonstrationen durch den Dozenten sowie einem interaktivem Übungsanteil in dem die Teilnehmer das erlernte Wissen in die Praxis umsetzen können. Das Seminar kann auf Wunsch nach vorheriger Absprache individuell auf den Bedarf der Teilnehmer angepaßt werden.
Optionale Kursteile
- HTML5 und CSS3 Grundlagen für die Entwicklung einer Anwendung mit Webtechnologie
- Einführung in die Programmierung mit JavaScript
- Einführung in die Programmierung mit TypeScript
Dieser Kurs wird wahlweise in der Programmiersrache JavaScript oder TypeScript angeboten werden.
Beispielagenda
- Einührung
- Überblick über die Werkzeuge (NodeJS, NPM, GULP …)
- X-Platform entwickeln mit Visual Studio Code (PC, Mac und Linux)
- erforderliche JavaScript / TypeScript Grunglagen
- ReactJS
- Funktionsweise ReactJS
- JavaScript Spracherweiterung JSX
- Funktions basierte Komponenten
- Verwenden der ES6 und/oder TypeScript Syntax
- Arbeiten mit dem Virtual DOM
- Imperative vs. Declarative
- Komposition und erzeugen von Komponten
- Verwenden des states und der props
- Lifecycle und Hooks
- Container vs Presentational Components
- Stateless Functional Components
- Pure Components
- Sytnthetic Events
- Aufbauwissen
- Error Boundaries
- Suspense API
- Performance Optimierungen
- React Router
- Deklarative Routen erstellen
- Weitere Einstellungen einer Route
- Route Matching
- Anination bei einem Übergang
- Query Parameter verwenden
- Links erstellen
- Flux
- Architektur und Flux Pattern
- Verwenden von Flux
- Alternative Implementierung Redux
- Redux
- Funktionsweise
- Verwenden der Bibliothek redux-toolkit
- Redux und Typescript
- Redux und der React-Router
- Unit Tests mit React Resting Library
- React-Anwendungen testen (mit Browser und ohne Browser)
- Testen von Componenten
- Best Practices
-
Aufbauwissen ReactJS
- Verwenden des context‘s
- React mit anderen JS Frameworks kombinieren
- Webpack verwenden und konfigurieren
- Internationalisierung einer ReactJS App
- Dependency Injection für ReactJS
- Formulare erstellen und validieren
- Unit Testing
-
Optional: Performanceoptimierung einer React Anwendung
- Optional: Anbinden einer REST oder GRAPH API