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

Tic-tac-toe: concepten

  • Closures
  • Immutability
    • Spread operator
  • Memoization
    • Pure functies

Closures

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

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

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.

PGM4/1 - Intro to React

By kareldesmet

Source: Frederick Roegiers

PGM4/1 - Intro to React

  • 87

More from kareldesmet