react fundamentals

Fundamentals van React

State, setState, useEffect

States zorgen ervoor dat de de react app echt dynamisch kan worden. Met state kunnen er stukken van code worden geupdate zonder dat de hele pagina moet worden herladen. Een state ziet er als volgt uit:

  const [geoMap, setGeoMap] = useState(null)

In dit voorbeeld is de geoMap de huidige state, het eeste item in de array is altijd de huidge state. setGeoMap is een functie die de huidige state kan updaten en useState renderd de state. Nu is de default waarde van de state dus null.

De pagina kan dus dynamisch worden gemaakt door de setGeoMap te updaten, waardoor de state wordt geupdate. Dit heb in mijn concept gedaan met het filteren van de data:

function showCharge(){
    const showCharge = garages.filter(d => d.id == 'charging' || d.id == 'both')
    setFilterData(showCharge)
}

In dit voorbeeld filter ik over garages wat een JSON object met data is en filter bepaalde id's uit. Vervolgens geef ik de nieuwe data mee aan setFilterData, deze kan ik nu gebruiken om mijn datavisualisatie mee te updaten. De reden dat ik hiervoor 2 verschillende states gebruik is omdat ik garages wil behouden om nog een keer overheen te kunnen loopen, om weer een ander filter toe te kunnen passen. Zo kan je state op meerdere manieren gebruiken om de pagina dynamisch te updaten.

Components and props react

Een website is vaak opgebebouwd uit components, kijk bijvoorbeeld naar twitter. Twitter heeft een startpagina, verkennen, meldingen enz. Dit zijn allemaal losse components. Binnen deze components zitten weer nieuwe components die bijvoorbeeld de verschillende post op je feed laten zien.

Zo een component based structure ziet er visueel zo uit:

Deze components kunnen dus met elkaar "communiceren" dit gebeurd a.d.v. import en export.

import Comp from './components/Comp'

//CODE VAN DE COMPONENT

//en hier wordt de code weer geexporteerd om het ergens anders weer te gebruiken
export default COMPcode

Een component kan er als volgt uitzien:

const Comp = ({ name, birthday }) => {
  return (
    <div className="namebirth">
      <h2>{name}</h2>
      <h3>{birthday}</h3>
    </div>
  )
}

In deze component zitten 2 props die worden opgehaald uit de component boven deze component: App.js. De variablen in deze component worden dus gebruikt in de component Comp door de variables name={name} op deze manier toe tevoegen.

function App() {
  //dit zijn de twee constaten die in de andere component worden ingeladen
  const name = 'Simon Planje'
  const birthday = '19-07-2000'
  return (
    <div className="App">
      <h1>hi react</h1>
      //hier worde de component Comp aangeroepen en de name en birthday meegegeven
      <Comp name={name} birthday={birthday} />
    </div>
  )
}

Classes or Hooks

Ik heb vrijwel direct voor gekozen om mijn componenten te schrijven met Hooks. Ik vond vanaf het begin classes al minder leesbaar. Hooks waren mij al snel duidelijk, en vond ik makkelijker in gebruik. Minder code, meer beter. "Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code."

Events

Events zijn in react nog veel makkelijker dan in vanilla javascript. Het kan er bijvoorbeeld als volgt uit zien:

<button onClick={() => sayHelloHandler(name)}>Click</button>

Hier staat het event in het element zelf met daarna de functie die door dit event moet worden aangeroepen.

Een "statische" component zou er dan als dan zo uit kunnen zien:

function App() {
  const name = 'Simon Planje'

  //create the event function
  const sayHelloHandler = (user) => {
    console.log(`hello ${user}`)
  }

  return (
    <div className="App">
      <h1>hi react</h1>
      <button onClick={() => sayHelloHandler(name)}>Click</button>
    </div>
  )
}