Wat is React?

Wat is React, wat kan je er mee en hoe verhoud het zich tot JavaScript?

React (ook wel React.js) genoemd is een JavaScript framework om user interfaces mee te maken. Denk daarbij aan websites, native apps voor zowel iOS als Android, en web applicaties.

Hoe werkt React?

Het idee achter React is dat je custom HTML tags maakt, die je vervolgens kan gebruiken om je user interface mee te maken. React noemt zo'n custom HTML tag een component.

Een component kan op het scherm van alles zijn: een knop, een kaart (Google maps), een footer, een image carousel, een chat interface etc etc

Laten we een simpel React component maken:

function Greeter() {
  return <p>Hallo Ada Lovelace hoe gaat het met je?</p>;
}

Een component in React maak je aan door een function te maken die met begint met een hoofdletter: in dit geval Greeter.

Vervolgens kunnen we dit component gebruiken, alsof het een HTML tag / element is:

<Greeter />

Dit zet het volgende op het scherm:

"Hallo Ada Lovelace hoe gaat het met je?"

Nu denk je misschien, hoe is het mogelijk dat je HTML binnen JavaScript kan gebruiken? Dit inderdaad is geen valide JavaScript syntax, rara hoe kan dit?

Het antwoord is JSX: JSX is een "uitbreiding" op JavaScript die het mogelijk maakt HTML te gebruiken in JavaScript.

JSX moet je dan compileren, zodat de browser het snapt.JSX compileert naar functie aanroepen van React.createElement().

Onze Greeter wordt dus gecompileerd naar het volgende:

function Greeter(props) {
  return React.createElement("p", null, "Hallo Ada Lovelace hoe gaat het met je?");
}

De Greeter is nu statisch: er staat altijd dezelfde naam. Laten we dit aanpassen zodat we de naam zelf kunnen meegeven:

function Greeter(props) {
  return <p>Hallo {props.name} hoe gaat het met je?</p>;
}

React geeft aan elk component als eerste parameter een object genaamd props mee. In dit object staan alle attributen die het component meekrijgt.

Nu we binnen Greeter gebruik maken van props.name , moeten we nu een name attribuut meegeven:

<Greeter name="Maarten Hus" />
<Greeter name="Jan Janssen" />
<Greeter name="Grace Hopper" />

Op het scherm verschijnt nu:

"Hallo Maarten Hus hoe gaat het met je?"

"Hallo Jan Janssen hoe gaat het met je?"

"Hallo Grace Hopper hoe gaat het met je?"

Binnen JSX kan je tussen {} (accolades), JavaScript expressie plaatsen. De {props.name} wordt dus vervangen met de name die wordt meegegeven als prop / attribuut.

Dit is natuurlijk nog maar het begin: mijn react cursus om meer over React te weten te komen. Leer hoe je een complete web applicatie bouwt met React en TypeScript.