Denken in React
Opwarmoefening
Multiple choice verbetering:
- Schrijf een functie die 2 arrays accepteert als argumenten. Beide arrays zijn niet leeg en hebben dezelfde lengte. Het eerste array stelt de correcte oplossing voor, het tweede array het antwoord. De functie moet de absolute score teruggeven o.b.v. deze puntentelling:
- Goed antwoord: +4 // Fout antwoord: -1 // Blanco: 0
Juiste antwoorden | Effectief antwoord | Resultaat
---------------------|-----------------------|-----------
["a", "a", "b", "b"] ["a", "c", "b", "d"] → 6
["a", "a", "c", "b"] ["a", "a", "b", "" ] → 7
["a", "a", "b", "c"] ["a", "a", "b", "c"] → 16
["b", "c", "b", "a"] ["" , "a", "a", "c"] → 0React
Componenten
Wat is een component?
- Herbruikbare bouwsteen
- Functionaliteit (Javascript)
- Styling (CSS)
- Mark-up (JSX → HTML)
Types componenten
-
Domme (presentationele) componenten:
- Weinig tot geen logica, state ...
- Draaien vooral rond de visuele opmaak
- Data wordt verkregen van andere componenten
-
Slimme (container) componenten:
- Bevatten logica, state ...
- Invloed op hoe de applicatie werkt
- Geven data door (props) aan andere componenten
Types componenten
- Hoe onderverdelen?
- Single responsibility principle
- a component should ideally only do one thing
- one (1): entity, item, task, element, group of ...
- Er is geen juist antwoord ...
- Learn by doing
- Single responsibility principle
Types componenten
- Hoe onderverdelen?
- Maak een oplijsting vóór je begint
- De top component noemen we altijd App
- Dan: top-down of bottom-up
- Kies bij voorkeur voor top-down
- Start met een statische versie
- Maak een oplijsting vóór je begint
Componenten
Componenten
Componenten
-
https://react.dev/learn/thinking-in-react
- State
- Search text
- Value of "only in stock" checkbox
- Props
- Products (if this was coming from an API, it would be state ...)
- State
Componenten
- Events
- Search text changes
- "Only in stock" checkbox clicked
Componenten
- Oefening
- Maak een simpele counter
- Click "Increment": +1
- Click "Decrement": -1
- Twee componenten:
- App
- Counter
- Maak een simpele counter
React project from scratch
- Wij gebruiken Vite als build tool
- Vroeger was create-react-app aanbevolen, maar dit is deprecated sinds februari 2025
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run devComponenten
- Oefening
- We breiden Counter uit met een aantal settings, maak hiervoor een nieuwe component Settings
- Minimum
- Maximum
- Herwerk zodat onze counter hiermee rekening houdt
- Minimum <= counter <= maximum
- Als minimum > huidige count: zet count naar minimum
- Als maximum < huidige count: zet count naar maximum
- We breiden Counter uit met een aantal settings, maak hiervoor een nieuwe component Settings
Componenten
Componenten
