Voorbereiding

De voorbereiding voor de les is niet optioneel. Ongeveer de helft van al het werk voor de opleiding moet je in eigen tijd uitvoeren, en daar hoort deze lesvoorbereiding ook bij. Als je de lesvoorbereiding niet hebt gedaan is het niet zinnig of zelfs hinderlijk om naar de les te komen.

Je hebt in de vorige les al enkele begrippen genoteerd die over state management in React gaan. Maak een tekstbestand (.md) en plaats die begrippen in dat bestand aangevuld met andere relevante concepten die je geleerd hebt uit les 1 en de bronnen uit les 1.

In de les gaan we deze begrippen verwerken in een concept-map, waarvan we hier enkele voorbeelden geven om je een idee te geven waar we naartoe werken. Deze concept-maps zijn gemaakt met Mermaid waarmee je in de lessen van de weken 3 en verder leert werken, tot die tijd tekenen we deze met de hand:

Mermaid broncode voor "Mermaid-diagram"

graph RL
  React["React"]
  React -->|Implements| CoreConcepts["Core Concepts"]
  React -->|Built from| Components["Components"]
  React -->|Manages| StateManagement["State Management"]
  React -->|Uses| Hooks["Hooks"]
  React -->|Integrates| Ecosystem["Ecosystem"]

  CoreConcepts -->|Syntax| JSX["JSX"]
  CoreConcepts -->|Virtual| VirtualDOM["Virtual DOM"]
  CoreConcepts -->|Passes| Props["Props"]
  CoreConcepts -->|Tracks| State["State"]

  Components -->|Type Definition| Functional["Functional Components"]
  Components -->|Type Definition| Class["Class Components"]
  Components -->|Follows| Lifecycle["Component Lifecycle"]

  StateManagement -->|Provides| useState["useState"]
  StateManagement -->|Provides| useReducer["useReducer"]
  StateManagement -->|Supports| Redux["Redux"]

  Hooks -->|Includes| useEffect["useEffect"]
  Hooks -->|Includes| useContext["useContext"]
  Hooks -->|Includes| useRef["useRef"]
  Hooks -->|Customizable| CustomHooks["Custom Hooks"]

  Ecosystem -->|Handles| Routing["React Router"]
  Ecosystem -->|Supports| Styling["Styling (e.g., CSS-in-JS)"]
  Ecosystem -->|Supports| DevServer["DevServer (e.g., Vite)"]
  Ecosystem -->|Tests| Testing["Testing (e.g., Jest)"]
  Ecosystem -->|Extends| StateLibraries["State Libraries (e.g., Zustand)"]

  Functional --> |Use| Hooks
  Functional --> |Preferred Type Definition| Components
  Functional --> |Advantage| Simplicity
  Functional --> |Advantage| Performance
  Functional --> |Advantage| Testability["Easier to test"]
  Functional --> |Advantage| Rationality["Easier to reason about"]
  Functional --> |Advantage| Debuggable["Easier to debug"]
  Class -->|Use| Lifecycle
  Props -->|Flow into| Components
  State -->|Managed by| StateManagement