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.
De relatie tussen JavaScript en React is dan ook het volgende: JavaScript is een programmeertaal en daarin is een framework geschreven dat React heet. Je programmeert dus in JavaScript en je gebruikt daarin React.
Standaard heeft JavaScript veel voorzieningen om rijke user interfaces mee te maken. Alles wat React kan, kan je ook in JavaScript, puur om het feit dat React in JavaScript is geschreven.
Maar waarom dan React en niet gewoon JavaScript? Het gebruik van een framework zoals React maakt het programmeren veel makkelijker, en ook nog eens sneller voor jouw als developer.
In JavaScript moet je namelijk heel veel banale, verveldende, saaie en langdradige code schrijven om wat te bereiken. Frameworks zoals React proberen dit voor jouw uit handen te nemen, zodat jij je kan concentreren op wat echt belangrijk is: de user interface en user experience.
Een framework heeft nog een ander groot voordeel: het zet je code op rails. Een mooie metafoor is het wilde westen: in JavaScript zit je als het ware op een paard: je kan alle kanten op. Je krijgt heel veel vrijheid om te coderen zoals jij dat wilt.
In React zit je in een trein: een trein gaat veel sneller dan een paard dus dat is mooi. Het nadeel is echter dat een trein op een spoor zit, je kan dus maar één kant op, je hebt dus minder vrijheid.
Nu denk je misschien dat is toch een nadeel? Maar dit is het juist niet. React code lijkt veel op elkaar, JavaScript code verschilt veel van elkaar. De ene developer schrijft JavaScript op manier A, en in een andere developer weer op manier B. Dan hebben we het niet eens over C tot Z gehad.
Werk je dus in een team, dan is een framework zoals React voordelig. Als je React snapt, en de manier hoe React werkt, dan is dat makkelijk om andere React code te snappen. Zelfs React code die je niet zelf geschreven hebt. Je kan dus sneller samen werken in een groter team.
Organisaties zien dit ook als winst: als zij een framework gebruiken kunnen ze makkelijk developers vinden die hun code snappen. Het inwerken / onboarden gaat dan veel soepeler.
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 je zien als een stukje lego. Lego kan je door verschillende blokken te combineren nieuwe dingen maken. Je begint met een klein lego blokje, en die combineer je tot een muur, van 4 muren maak je een kamer, van kamers een huis, en van huisen een woonwijk en dan een stad en zo maar door.
Je maakt dus in React componenten, die door samen te werken steeds grotere componenten worden.
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: volg een klassikale of online cursus om meer over React te weten te komen. Leer hoe je een complete web applicatie bouwt met React en TypeScript.