React.js - Grund- und Aufbaukurs

المجموعات المستهدفة:

 Softwareentwickler/-innen, Web- und App-Entwickler/-innen (m/w/d)

المتطلبات المهنية:

JavaScript, ECMA-Script

المتطلبات التقنية:

Keine besonderen Anforderungen.

منهجية وكالات العمل:

• C 1435-10-10 Softwareentwicklung, Programmierung - allgemein

المحتويات

React ist ein JavaScript-Framework zur Entwicklung von Benutzeroberflächen sowohl im Browser als auch auf Mobilgeräten. React bildet typischerweise die Basis für Single-Page-Webanwendungen. Die Kernidee von React besteht in der Annahme, dass die Komponenten im untergeordnete Anwendungsbaum bei jeder Änderung einer Eigenschaft neu aufgebaut werden.

Grundlagen der Programmierung mit React.js

React.js ist eine JavaScript-Bibliothek für die Frontend-Entwicklung von Benutzeroberflächen. Es ermöglicht die Entwicklung von schnellen und modularen Anwendungen, die eine verbesserte Benutzung bieten. React.js erleichtert die Erstellung von Komponenten-basierten Anwendungen und bietet effiziente Updates der Benutzeroberfläche, ohne die Seite komplett neu zu laden. Dieser Kurs verwendet Typescript, Tailwind und Jest für das Testing

Inhalt
Die ersten Schritte mit React
Die wichtigsten Begriffe und Konzepte der React-Welt
Die ersten Schritte im Entwicklungsprozess
Playgrounds für React
Der Einstieg in die Entwicklung mit React
Die Struktur der Applikation
Fehlersuche in einer React-Applikation
Die Grundlagen von React
Funktionskomponenten
JSX -- Strukturen
Props -- Informationsfluss
Lokaler State
Event-Binding
Immutability
Ein Blick hinter die Kulissen
Der Lebenszyklus einer Komponente
Serverkommunikation
Container Components
Higher-Order Components
Render Props
Kontext
Fragments
Klassenkomponenten
Grundlegende Struktur einer Klassenkomponente
Props
State
Der Komponenten-Lifecycle
Error Boundaries
Unterschiede zwischen Funktions- und Klassenkomponenten
Die Hooks-API von React
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
useDeferredValue
useTransition
useId
Bibliotheks-Hooks
Umstieg auf Hooks
Typsicherheit in React-Applikationen mit TypeScript
Die verschiedenen Typsysteme
Typsicherheit in einer React-Applikation mit Flow
TypeScript und React
Styling von React-Komponenten
CSS-Import
Inline-Styling
CSS-Module
CSS in JavaScript mit Emotion
Tailwind
Eine React-Applikation durch Tests absichern
Die ersten Schritte mit Jest
Snapshot-Testing
Komponenten testen
Umgang mit Serverabhängigkeiten
Formulare in React
Uncontrolled Components
Controlled Components
Der Upload von Dateien
Formularvalidierung mit React Hook Form



- Fortgeschrittene Programmierung mit React.js

(180 Unterrichtsstunden)

Inhalt:

React.js ist eine JavaScript-Bibliothek für die Frontend-Entwicklung von Benutzeroberflächen. Es ermöglicht die Entwicklung von schnellen und modularen Anwendungen, die eine verbesserte Benutzung bieten. React.js erleichtert die Erstellung von Komponenten-basierten Anwendungen und bietet effiziente Updates der Benutzeroberfläche, ohne die Seite komplett neu zu laden. Zusätzlich verwenden wir in diesem Kurs Material-UI, Redux, JWT und Apollo GraphQL

Inhalt
Komponentenbibliotheken in einer React-Applikation
Installation und Integration von Material-UI
Listendarstellung mit der »Table«-Komponent
Grids und Breakpoints
Icons
Datensätze löschen
Neue Datensätze erzeugen
Datensätze editieren
Navigation innerhalb einer Applikation -- der Router
Installation und Einbindung
Navigation in der Applikation
Testen des Routings
Bedingte Umleitungen
Dynamische Routen
Eigene React-Bibliotheken erzeugen
Eine eigene Komponentenbibliothek erzeugen
Einbinden der Bibliothek
Testen der Bibliothek
Zentrales State-Management mit Redux
Die Flux-Architektur
Installation von Redux
Datensätze erstellen und bearbeiten
Umgang mit Asynchronität und Seiteneffekten in Redux
Middleware in Redux
Redux mit Redux Thunk
Generators -- Redux Saga
State-Management mit RxJS -- Redux Observable
JWT zur Authentifizierung
Serverkommunikation mit GraphQL und dem Apollo-Client
Einführung in GraphQL
Apollo, ein GraphQL-Client für React
Lokales State-Management mit Apollo
Authentifizierung
Internationalisierung
Einsatz von react-i18next
Platzhalter verwenden
Werte formatieren
Singular und Plural
Server-Side Rendering
Umsetzung von Server-Side Rendering
Performance
Der Callback-Hook
Pure Components
React.lazy
Virtuelle Tabellen
Abschluss Projekt