Introductie tot React

Opwarmoefening

Facebook likes

Schrijf een functie die een array van namen accepteert als argument. De functie moet een string terug geven zoals hieronder beschreven:

[]                                -->  "Niemand vindt dit leuk"
["Peter"]                         -->  "Peter vindt dit leuk"
["Marc", "Alex"]                  -->  "Marc en Alex vinden dit leuk"
["Louise", "Lukas", "Bert"]       -->  "Louise, Lukas en Bert vinden dit leuk"
["Tom", "Sarah", "Marc", "Max"]   -->  "Tom, Sarah en 2 anderen vinden dit leuk"

React

Achtergrond

Waarom React?

Plain vanilla Javascript heeft een aantal nadelen
- Imperatief programmeren: beschrijf hoe iets moet gebeuren bv. DOM manipulatie
- Warm water werd telkens heruitgevonden om (middel)grote applicaties leesbaar, testbaar en beheerbaar te maken

Waarom React?

Het antwoord: React, Angular, Vue ...
- Component-based frameworks / libraries
- Makkelijk om te redeneren in componenten
  - Testbaar
  - Leesbaar
  - Beheerbaar (uitbreiden, inkrimpen ...)
- Declaratief programmeren: beschrijf het
  verwachte eindresultaat

React

Inleidende concepten

Tic-tac-toe

https://react.dev/learn/tutorial-tic-tac-toe
- Learn by doing
- Prachtige introductie tot React
- Eerst bespreken we een aantal begrippen die ook aan bod komen in de tutorial

Tic-tac-toe: concepten

Closures
Immutability
- Spread operator
Memoization
- Pure functies

Closures

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
A closure gives a function access to its outer scope
- block scope (const, let) vs. global scope (var)
- React: vaak functies nesten in andere functies
Vroeger: een klassieke interview-vraag

Closures

Voorbeeld:

const sum = (a, b) => {
    return a + b;
}

const sumThree = (x) => {
    return sum(3, x);
}

sumThree(5);
// dit geeft 8 terug dankzij closures

Immutability

https://developer.mozilla.org/en-US/docs/Glossary/Immutable
Voorbeeld: array methods
- splice: mutable (modifies array in-place)
- slice: immutable (returns new array)

Immutability

Vuistregel in Javascript: zorg ervoor dat uw code
zoveel mogelijk immutable is
Concreet: maak een nieuw object of array wanneer een van de properties of elementen wijzigt
Front-end frameworks (Angular, React ...) steunen hierop. Waarom? Omdat anders te veel properties moeten vergeleken worden bij re-renders / recalculations

Immutability

Voorbeeld: voeg strawberries toe aan fruits

const fruits = ["apples", "bananas", "oranges"];

Immutability

Voorbeeld: voeg strawberries toe aan fruits

const fruits = ["apples", "bananas", "oranges"];

// Mutable approach
fruits.push("strawberries");

const fruits = ["apples", "bananas", "oranges"];

// Immutable approach
const newFruits = [...fruits, "strawberries"];

Immutability

Oefening: verwijder bananas uit fruits
1. Mutable approach
2. Immutable approach

const fruits = ["apples", "bananas", "oranges"];

Immutability

Oefening: verwijder bananas uit fruits
1. Mutable approach
2. Immutable approach

const fruits = ["apples", "bananas", "oranges"];

Memoization

Memoization is een techniek waarbij resultaten gecached worden om bepaalde calculaties niet opnieuw te hoeven uitvoeren
Voorbeeld:
- Mijn webapplicatie toont de exacte afstand (volgens de ingewikkelde Harversine-formule) tussen de gebruiker en campus Leeuwstraat
- Als de pagina of component opnieuw rendert, wil ik niet dat dit opnieuw moet berekend worden, als de locatie van de gebruiker ongewijzigd bleef. We zorgen er daarom voor dat deze functie memoized is.

Pure functies

Memoization is dus enkel mogelijk bij pure functies d.w.z. functies die bij een ongewijzigde input altijd dezelfde output hebben
Voorbeelden van impure functions?

Pure functies

Memoization is dus enkel mogelijk bij pure functies d.w.z. functies die bij een ongewijzigde input altijd dezelfde output hebben
Voorbeelden van impure functions?
- Denk:
  - Math.random()
  - Date.now()
  - ...

Pure functies

Vuistregel in Javascript: zorg ervoor dat functies zoveel mogelijk puur zijn

React

Tutorial: tic-tac-toe

https://react.dev/learn/tutorial-tic-tac-toe

Tutorial: tic-tac-toe

Samenvatting
- JSX: syntax om HTML en Javascript te combineren
- Props: data die doorgegeven wordt vanuit de
  parent component
- State: data die geïnitialiseerd en gewijzigd wordt door de component zelf

Tutorial: tic-tac-toe

Werkcollege: improvements onderaan op https://react.dev/learn/tutorial-tic-tac-toe
- For the current move only, show “You are at move #…” instead of a button.
- Rewrite Board to use two loops to make the squares instead of hardcoding them.
- Add a toggle button that lets you sort the moves in either ascending or descending order.
- When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
- Display the location for each move in the format (row, col) in the move history list.