React Themen Checkliste

Eine Checkliste zum Lernen von React-Themen

(Ist nicht dazu gedacht, in dieser Reihenfolge durchlaufen zu werden)

React Grundlagen

• [ ] Use-Cases von React
• [ ] JavaScript Grundlagen für React
  • [ ] Immutability / Datenverwaltung ohne Mutationen
    • [ ] Ändern einzelner Properties in einem Objekt
    • [ ] Hinzufügen von Properties zu einem Objekt
    • [ ] Hinzufügen von Elementen zu einem Array (create)
    • [ ] Ändern von Elementen in einem Array (update)
    • [ ] Entfernen von Elementen aus einem Array (delete)
  • [ ] Destrukturierende Zuweisung mit Arrays und Objekten
  • [ ] Imports und Exports: named und default
• [ ] State
  • [ ] Verwenden des State Hooks (useState)
  • [ ] minimaler State und abgeleitete Werte
  • [ ] Input State
    • [ ] Verbinden von Inputs zum State mit value und onChange
    • [ ] Verwalten verschiedener Input-Typen
    • [ ] Verwalten numerischer Inputs
  • [ ] Wichtigkeit von Immutability in React-State
  • [ ] Verwenden des State-Hooks mit TypeScript
• [ ] JSX
  • [ ] Wechseln von JS zu XML-Modus
  • [ ] Wechseln von XML zu JS-Modus in Inhalten
  • [ ] Wechseln von XML zu JS-Modus in Properties
  • [ ] Einbinden von Strings und Zahlen
  • [ ] Setzen von booleschen HTML-Properties (z.B. disabled)
  • [ ] className
  • [ ] die style-Property in JSX
  • [ ] Whitespace in HTML vs Whitespace in JSX
  • [ ] Escaping von Zeichen wie <, &, >
  • [ ] Kommentare
  • [ ] if / else
    • [ ] der Operator && in JS und JSX
  • [ ] Wiederholen von Elementen
    • [ ] die key-Property
  • [ ] Event-Handler in JSX
    • [ ] Zugriff auf das Event-Objekt
    • [ ] onClick={handleEvent} (do) vs onClick={handleEvent()} (don't)
    • [ ] preventDefault
    • [ ] Eventtypen in TypeScript
  • [ ] JSX Fragmente
  • [ ] Sicherheit und XSS-Angriffe
    • [ ] dangerouslySetInnerHtml
  • [ ] Kompilierung von JSX
• [ ] Entwicklungsumgebung
  • [ ] Formatter (z.B. prettier)
  • [ ] Linter (z.B. eslint)
  • [ ] Entwickeln mit node.js und npm
  • [ ] Initialisieren eines React-Projekts (z.B. via create-react-app)
  • [ ] Entwicklungsserver
  • [ ] Production Build und Deployment
  • [ ] React Developer Tools Browser-Plugin
  • [ ] Projektstruktur: verbreitete Zugänge
• [ ] TypeScript Grundlagen für React
  • [ ] TypeScript Vorteile: Autovervollständigung und Fehler-Reporting
  • [ ] Typendeklarationen für Libraries
  • [ ] Type Inference
  • [ ] Deklarieren von Typen von Variablen
  • [ ] primitive Typen: number, string, boolean
  • [ ] Array-Typen
  • [ ] Objekttypen
    • [ ] optionale Properties
  • [ ] any
  • [ ] Type Aliases und Interfaces Grundlagen
    • [ ] Exportieren und Importieren von Type Aliases und Interfaces
  • [ ] Funktionssignaturen und Funktionstypen
    • [ ] void
  • [ ] Type Assertions
  • [ ] Verwenden von (bestehenden) Generics (z.B. Array<...>, useState<...>)
  • [ ] Union Types
• [ ] Komponenten
  • [ ] Überblick: Funktionskomponenten und Klassenkomponenten
  • [ ] Definieren von Komponenten als Funktionen
  • [ ] State über mehrere Komponenten hinweg teilen
  • [ ] Überblick über bestehende Komponentenlibraries
  • [ ] Props in eigenen Komponenten
  • [ ] Events in eigenen Komponenten
  • [ ] Inhalte an Komponenten übergeben
  • [ ] "Wrapper" für bestehende Elemente (z.B. button -> StyledButton)
• [ ] Hooks
  • [ ] was sind Hooks?
  • [ ] Regeln für Hooks
  • [ ] Überblick über eingebaute Hooks und Hooks aus Libraries
  • [ ] Erstellen eigener Hooks

React Libraries und Tools

• [ ] React-Ökosystem und Libraries für verschiedene Zwecke (Überblick)
  • [ ] Komponentenlibraries
  • [ ] API-Abfragen
  • [ ] Routing
  • [ ] Styling-Tools
  • [ ] Formular-Handling
  • [ ] State Management
• [ ] API-Abfragen
  • [ ] Netzwerkanfragen in JavaScript (fetch, async/await)
  • [ ] API Query Libraries für React: z.B. react-query
  • [ ] Überblick: useEffect
• [ ] Routing Grundlagen
  • [ ] client-seitiges Routing
  • [ ] react-router Library
    • [ ] Definieren von Routen
    • [ ] Verwenden von Links
    • [ ] verschachtelte Routen
    • [ ] Routenparameter
    • [ ] Navigation aus JavaScript
    • [ ] Styling aktiver Links
• [ ] Styling-Werkzeuge
  • [ ] Werkzeuge für externe Stylesheets
    • [ ] das Paket classnames
    • [ ] CSS-Module
    • [ ] SCSS
  • [ ] CSS-in-JS
    • [ ] inline styles
    • [ ] "styled components"
  • [ ] Animationen
    • [ ] Animieren des Erscheinens / Verschwindens von Elementen
• [ ] Formulare
  • [ ] Strategien zur Formularvalidierung
  • [ ] Libraries für Formulare: react-hook-form, formik
• [ ] State Management Überblick
  • [ ] Libraries: zustand, redux, mobX, ...

Intermediate React

• [ ] State Hook im Detail
  • [ ] State-Transformations-Funktionen, veralteter State
  • [ ] State-Initialisierungs-Funktionen
• [ ] Klassenkomponenten
  • [ ] Definieren von Komponenten als Klassen
  • [ ] Props in Klassenkomponenten
  • [ ] State in Klassenkomponenten
  • [ ] mögliche Probleme mit this
• [ ] Side Effects
  • [ ] Zwecke von Side Effects
  • [ ] Side Effects in Klassenkomponenten
  • [ ] Side Effects in Funktionskomponenten
  • [ ] "Aufräumen" von Side Effects
  • [ ] "strict mode" und doppelter Aufruf von Side Effects
• [ ] Context
  • [ ] "reine Provider" und "Provider mit State"
  • [ ] Context und State mittels constate
  • [ ] Context mit reinem React
• [ ] refs
  • [ ] refs zum Ablegen von Objekten, die das Rendering nicht beeinflussen
  • [ ] refs zum Vermeiden von veraltetem State
  • [ ] die ref-Property zum Zugreifen auf DOM-Elemente
  • [ ] die ref-Property in eigenen Komponenten

Performanceoptimierung

• [ ] React devtools und Performance
• [ ] Memoisierung
• [ ] Memoisierung von aufwändigen Berechnungen
• [ ] Vermeiden unnötiger Rerenderings
• [ ] Virtual DOM
• [ ] lazy-loading von Komponenten
• [ ] Verkleinern der Bundle-Größe

Testen

• [ ] Testen in JavaScript
  • [ ] Assertions
  • [ ] test runners: z.B. Jest, node:test
  • [ ] mocken in JavaScript, mocken von Netzwerkantworten
  • [ ] end-to-end Testing Libraries: e.g. cypress, playwright
• [ ] Testen in React: react-testing-library

State Management: Intermediate

• [ ] Konzept: Actions
• [ ] Konzept: Reducer
• [ ] Reducer-Hook
• [ ] Überblick: Redux
• [ ] Hilfslibraries für Immutability (immer.js, immutable.js)

Fortgeschrittene Konzepte und Muster

• [ ] Portale
• [ ] Error Boundaries
• [ ] Higher-order Components
• [ ] render props

Andere Themen

• [ ] Benutzerauthentifizierung
• [ ] Internationalisierung
• [ ] Pre-Rendering und next.js
• [ ] Redux Vertiefung
• [ ] React und GraphQL / Apollo
• [ ] React Native
• [ ] PWAs