Wat is ReactJS?

React is een JavaScript-bibliotheek waarmee je de schermen van een website of applicatie bouwt. In plaats van stap voor stap op te schrijven wat de browser moet aanpassen, leg je vast hoe het scherm hoort te zijn bij een bepaalde stand van zaken. React zoekt zelf uit welke aanpassingen daarvoor nodig zijn.

Het komt uit Facebook, tegenwoordig Meta. Jordan Walke bouwde het daar en op 29 mei 2013 werd het op JSConf US openbaar gemaakt. Inmiddels is het de meest gebruikte manier om een schermlaag te bouwen, en het zit ook in WordPress: de blokkeneditor draait erop.

Bibliotheek of framework

React wordt vrijwel overal een framework genoemd. Strikt genomen klopt dat niet. Het doet één ding, namelijk schermen bouwen en bijhouden, en al het andere kies je zelf.

Dat verschil is niet alleen woordenspel. Bij een framework krijg je een route-afhandeling, een manier om gegevens op te halen en een projectindeling meegeleverd. Bij React begin je met een leeg vel en moet je zelf beslissen hoe je pagina's aan adressen koppelt, hoe je met formulieren omgaat en waar gedeelde gegevens komen te staan.

Voor een ervaren team is die vrijheid prettig. Voor iemand die begint is het de grootste bron van verwarring, want twee React-projecten kunnen er volstrekt anders uitzien. Hoe bibliotheken en frameworks zich tot elkaar verhouden staat bij webontwikkelingsbibliotheken.

In de praktijk kies je dus een router, iets voor het ophalen en bewaren van servergegevens, en meestal iets voor formulieren. Per onderdeel zijn er meerdere gangbare keuzes, en welke in de mode is verschuift om de paar jaar. Dat is de verborgen kostenpost: niet de bibliotheek zelf, maar de tien beslissingen eromheen die je project voor jaren vastleggen.

Het probleem dat React oplost

Zonder hulpmiddel werk je een scherm zelf bij. Verandert er iets, dan zoek je in JavaScript de juiste elementen op en pas je ze stuk voor stuk aan.

Neem een lijst met producten die je filtert op prijs. Je haalt de items weg die afvallen, je voegt de nieuwe toe, je werkt de teller met het aantal resultaten bij, je toont of verbergt de melding dat er niets gevonden is, en je zet de knop om het filter te wissen aan of uit. Vijf handelingen voor één schuifje. Sla je er één over, dan staat er iets op het scherm dat niet meer waar is.

In React schrijf je die handelingen niet op. Je beschrijft alleen hoe het scherm hoort te zijn bij een bepaalde filterinstelling, en de bibliotheek regelt de rest. Dat scheelt geen regels code, maar het haalt een categorie fouten weg. Precies de categorie die tijdens het testen nooit opvalt en bij de klant wel.

De begrippen die je tegenkomt

• Componenten. Herbruikbare blokken met hun eigen weergave en gedrag. Een knop, een productkaart, een formulier. Alles in React is een component.
• JSX. Een schrijfwijze waarmee je HTML-achtige code midden in je JavaScript zet. Het went sneller dan het eruitziet.
• Props. Gegevens die een component van bovenaf meekrijgt. Ze gaan één kant op en het component mag ze niet zelf wijzigen.
• State. Gegevens die een component zelf bijhoudt en die kunnen veranderen, zoals de inhoud van een invoerveld.
• Hooks. Functies waarmee een component toestand en gedrag krijgt. Sinds 2019 de standaardmanier van werken.

Van dat rijtje is de eenrichtingsstroom van props het belangrijkst. Gegevens zakken naar beneden, meldingen gaan via meegegeven functies weer omhoog. Een onderliggend component past dus nooit zelf iets aan bij zijn ouder. Dat voelt de eerste weken omslachtig en het betaalt zich terug op het moment dat je moet uitzoeken waar een waarde is veranderd.

Hooks, en waarom oude voorbeelden niet aansluiten

Een component kun je in React op twee manieren opschrijven, en daar loopt bijna elke beginner op vast.

De oude manier gebruikt klassen met vaste methodes die op vaste momenten worden aangeroepen. De nieuwe gebruikt gewone functies met hooks erin. Die kwamen op 6 februari 2019 uit met React 16.8 en zijn sindsdien de standaard.

Zie je in een voorbeeld het woord class staan, of componentDidMount, dan heb je de oude manier voor je. Die werkt nog en het is een andere denkwijze. Leg zo'n voorbeeld niet naast je eigen code.

De hook die je het eerst leert is useState, voor gegevens die veranderen. De tweede is useEffect, voor dingen die buiten React gebeuren: iets ophalen bij een server, een timer starten, luisteren naar het formaat van het venster. Die tweede is meteen de plek waar het het vaakst misgaat.

Het symptoom is een scherm dat blijft laden of een verzoek dat honderden keren wordt verstuurd. De oorzaak zit bijna altijd in de lijst met waarden waarop een effect reageert: het effect verandert iets, dat iets zet het effect opnieuw aan, en zo blijft het rondgaan. Sinds React 18 draait een effect in de ontwikkelmodus bovendien met opzet twee keer, om precies zulke fouten vroeg zichtbaar te maken. Half internet denkt daardoor dat er iets stuk is.

Hertekenen, sleutels en de Compiler

Verandert er in React iets, dan draait het betreffende component helemaal opnieuw. Niet één regel, maar de hele functie, en alle componenten die eronder hangen. Dat klinkt verkwistend en dat is het ook een beetje.

Het resultaat gaat niet rechtstreeks naar de pagina. React bouwt eerst een beschrijving op in het geheugen en legt die naast de vorige; alleen wat afwijkt wordt in het echte scherm aangepast. Daar komt de term virtuele DOM vandaan.

Hier ligt meteen het verschil met andere bibliotheken. Waar Vue.js per waarde bijhoudt welk stukje scherm ervan afhangt, is React grover: het rekent liever te veel opnieuw uit en vertrouwt op de vergelijking achteraf. Simpeler te begrijpen, meer rekenwerk.

Bij lijsten heeft React hulp nodig om te weten welk item welk is. Daarvoor geef je elk item een sleutel mee, en die moet een vast kenmerk zijn: een productnummer, een id uit de database. Gebruik je het volgnummer uit de lijst, dan raakt de koppeling zoek zodra er iets tussenuit valt. Het klassieke gevolg is een rij invulvelden waarin de ingetypte tekst na het verwijderen van een regel bij het verkeerde item staat.

Dat overbodige hertekenen hielden programmeurs jarenlang met de hand in toom, met useMemo en useCallback. Sinds 7 oktober 2025 doet de React Compiler dat automatisch: die kijkt tijdens het bouwen naar je code en voegt zelf toe wat er nodig is. Het is de grootste verandering in hoe je React schrijft sinds de hooks, en het scheelt vooral een hoop code die er alleen stond om snelheid te winnen.

Next.js en waar de pagina wordt opgebouwd

Op React zijn raamwerken gebouwd die de openstaande keuzes voor je invullen. Next.js is de bekendste. Het regelt routes op basis van je mappenstructuur, het kan pagina's op de server opbouwen, en het levert de gereedschapskist mee.

De huidige manier van werken heet de App Router, verschenen in oktober 2022 met versie 13 en stabiel sinds mei 2023. Alles van daarvoor beschrijft de oudere indeling met een map genaamd pages. In handleidingen lopen ze door elkaar, dus stel eerst vast welke versie je voor je hebt.

Voor jou als opdrachtgever telt vooral het gevolg voor de hosting. Laat je alle pagina's vooraf uitrekenen, dan houd je een map met bestanden over die op elk webhostingpakket kan staan dat je nu al hebt. Moeten ze pas bij het opvragen worden opgebouwd, dan is er een machine nodig waarop Node.js permanent draait, en dat zit niet in een gedeeld pakket dat op PHP is ingericht.

Dat verschil bepaalt je maandlasten en de vrijheid om te verhuizen. Het staat zelden in een offerte, dus vraag ernaar voordat er gebouwd wordt.

Wat het met je vindbaarheid doet

Google voert JavaScript uit en komt dus bij inhoud die pas in de browser verschijnt. Alleen niet meteen: dat is een aparte ronde die later volgt, wanneer het Google uitkomt.

Wat je daarvan merkt: pagina's die pas na weken in de index staan, of die er half in staan met een lege titel en een lege omschrijving. Hoe dat opnemen in de index verloopt staat bij indexering door zoekmachines.

Belangrijker is wat er níet in een tweede ronde langskomt. Een deelknop op LinkedIn, een voorbeeldkaartje in WhatsApp en de meeste robots van AI-diensten lezen alleen de eerste HTML die binnenkomt. Is die leeg, dan is je kaartje leeg en word je in een AI-antwoord niet aangehaald.

Daar valt achteraf weinig aan te repareren. Wil je gevonden worden, dan moet je tekst in de eerste HTML zitten die de server verstuurt. React 19 helpt daarbij: je zet titel en meta-informatie nu gewoon in je component, waar je vroeger een aparte hulpbibliotheek voor nodig had.

De bouwstap en wat er veroudert

Een React-project heeft een bouwstap en een lijst met pakketten. Die lijst is langer dan je denkt, want elk pakket sleept zijn eigen afhankelijkheden mee.

Op 14 februari 2025 heeft het React-team Create React App afgeschaft, jarenlang de standaardmanier om een project te beginnen. Het werkt nog, het krijgt geen ontwikkeling meer, en nieuwe installaties geven een waarschuwing. Vind je een handleiding die daarmee begint, dan is die verouderd.

Daar zit het praktische bezwaar voor een klein bedrijf. Zo'n project vraagt onderhoud, ook als er inhoudelijk niets gebeurt. Na twee jaar stilstand werkt de bouwstap niet meer en is iemand een halve dag bezig met versies voordat hij aan die ene tekst toekomt.

Er zit ook een beveiligingskant aan. Pakketten komen van een openbaar register, en dat register is de laatste jaren meerdere keren misbruikt om kwaadaardige code te verspreiden. Leg daarom vast welke versies je gebruikt en werk ze bewust bij, in plaats van blind met de nieuwste mee te bewegen.

React in WordPress

Dit raakt de meeste Nederlandse ondernemers zonder dat ze het weten. De blokkeneditor van WordPress is in React geschreven, dus wie plugins of blokken voor die editor bouwt, komt React vanzelf tegen.

Daar zitten twee eigenaardigheden aan. WordPress levert React zelf mee in plaats van dat jij het meelevert, en je koppelt je code aan die versie. In augustus 2026 is dat nog steeds React 18, waar WordPress in maart 2023 op overstapte. De overgang naar React 19 is in de zomer van 2026 teruggedraaid omdat plugins die zelf hulpcode van React 18 meestuurden erdoor vastliepen, en staat nu gepland voor na WordPress 7.1.

De tweede eigenaardigheid: de Interactivity API, die sinds WordPress 6.5 van 2 april 2024 in de kern zit en bedoeld is voor interactie op de voorkant van je site, gebruikt geen React maar Preact. Dat is een veel kleinere bibliotheek die zich op hoofdlijnen hetzelfde gedraagt. WordPress koos daarvoor omdat het gewicht op elke pagina van elke bezoeker meetelt.

Voor de voorkant van een gewone WordPress-site heb je React dus niet nodig, en de kern gebruikt het daar zelf ook niet.

Waarom een gewone bedrijfssite hier niets aan heeft

Ik zeg dit met opzet stellig, want in verkooppraatjes komt het zelden voorbij: de meeste sites die ik tegenkom worden er slechter van.

Een homepage, wat dienstenpagina's, een blog en een contactformulier zijn documenten. Ze worden opgehaald, gelezen en verlaten. Er is nauwelijks iets aan de gang dat bijgehouden moet worden, dus gereedschap dat daar goed in is heeft niets te doen.

Wat je er wel voor terugkrijgt is een zwaardere pagina, een tragere eerste indruk en een site die zonder JavaScript blanco blijft. Voor iets dat vooral iets moet uitleggen is dat een slechte ruil.

En er is een eigenaarskwestie. Draait je site op een contentmanagementsysteem, dan wil jij je eigen teksten kunnen wijzigen. Zit die tekst in een component, dan kan dat niet meer zonder ontwikkelaar en bel je voor elke komma je bureau. Zo'n afhankelijkheid voel je pas een jaar later.

Heb je op één plek echt interactie nodig, zeg een prijsberekening, zet React dan alleen op dat blok en laat de rest van de pagina met rust. Die tussenweg wordt te weinig gekozen.

Wanneer het wel loont

Bij schermen waarin de bezoeker aan het werk is in plaats van aan het lezen. Een boekingsscherm waarin de beschikbare tijden meebewegen met de gekozen datum. Een kassa. Een offertetool met tientallen keuzes die elkaar beïnvloeden. Een kaart met filters.

Bij onderdelen die op tientallen schermen terugkomen en overal gelijk moeten blijven. Daar zijn componenten voor gemaakt, en de winst loopt op met het aantal schermen.

En bij een team dat er al mee werkt. Voor een Nederlands bedrijf telt dat argument zwaarder dan het lijkt: je vindt hier eenvoudiger een opvolger voor React dan voor de meeste alternatieven. Bij het zoeken naar een nieuwe partij is dat het verschil tussen drie offertes en één.

Toegankelijkheid bij schermen die zichzelf vervangen

Laadt een gewone pagina, dan weet een schermlezer dat er iets nieuws is. Hij leest de nieuwe titel voor en begint bovenaan.

Vervangt een scherm zichzelf zonder dat er een pagina laadt, dan blijft dat allemaal uit. De titel in het tabblad verandert niet, de aandacht blijft staan op de knop die net is ingedrukt, en wie het beeldscherm niet ziet merkt niet dat er iets gebeurd is.

Je moet dat zelf inbouwen: titel bijwerken, aandacht verplaatsen naar de nieuwe inhoud, en meldingen doorgeven in een gebied dat een schermlezer meeleest. Het is een middag werk en het gebeurt bijna nooit. Sinds de Europese toegankelijkheidsrichtlijn op 28 juni 2025 van kracht werd, is dat voor webshops en een aantal andere diensten geen vrije keuze meer.

Wie er tegenwoordig over React gaat

React was ruim tien jaar van Meta. Daar kwam verandering in: in oktober 2025 werd aangekondigd dat React en React Native naar een eigen stichting gaan bij de Linux Foundation, en die React Foundation is begin 2026 van start gegaan.

Bij de oprichters zitten naast Meta onder meer Amazon, Microsoft en Vercel, het bedrijf achter Next.js. Meta blijft meebetalen en meewerken.

Aan je code verandert dat niets. Het verkleint wel de kans dat één bedrijf van koers verandert en een techniek meesleept waar jouw site op draait. Kijken wie een open project betaalt voordat je erop bouwt is geen overdreven voorzichtigheid; er zijn genoeg bibliotheken die zijn doodgebloed toen hun sponsor iets anders ging doen.

Wat je vraagt als je iets laat bouwen

De bouw is zelden het probleem. Het onderhoud is het probleem, en dat staat vaak niet in de offerte.

Vraag wie de code beheert en waar die staat. Vraag wat een jaar bijhouden kost, inclusief het bijwerken van pakketten. Vraag hoeveel dagen een derde partij nodig heeft om het over te nemen. Die derde vraag hoor ik zelden stellen en hij zegt het meeste, want het antwoord verraadt of het project netjes in elkaar zit.

Vraag ook waar het draait. Bij persoonsgegevens scheelt een server binnen de EU je een hoop uitzoekwerk, en je hebt met de hostingpartij een verwerkersovereenkomst nodig. Next.js belandt standaard op een Amerikaans platform omdat dat de makkelijkste knop is, en daarmee koop je een discussie over doorgifte die je niet hoefde te voeren.

Als je het wilt leren

Zorg eerst dat je JavaScript zelf kent, en dan vooral arrays bewerken, functies doorgeven en omgaan met code die op iets moet wachten. Wie die basis overslaat leert de trucjes van React en niet het vak eronder, en staat stil zodra er iets moet wat er niet in zit.

Begin daarna op react.dev. Die uitleg is in maart 2023 vanaf nul herschreven en laat je in de browser meetypen; hij is beter dan de meeste betaalde cursussen. De oude versie staat er los naast en gaat nog over klassen.

Kijk bij al het overige naar de datum. Van voor 2019 gaat over klassen, van voor 2023 kent de App Router niet, en van voor eind 2025 kent de React Compiler niet. Bij dit onderwerp is dat geen detail: het scheelt of je iets leert dat nog gebruikt wordt.

Veelgestelde vragen over ReactJS

Is React een programmeertaal?

Nee. React is een bibliotheek die in JavaScript is geschreven en die je met JavaScript gebruikt. De taal die je leert is JavaScript, React is een manier om die taal voor schermen in te zetten.

Is React een framework of een bibliotheek?

Technisch een bibliotheek: het doet alleen de schermlaag en laat routes, gegevens ophalen en projectindeling aan jou over. In het dagelijks taalgebruik noemt vrijwel iedereen het een framework, en in de praktijk gebruik je het meestal binnen een echt framework als Next.js.

Is React gratis?

Ja, onder de MIT-licentie, dus je mag het vrij gebruiken en ook commercieel inzetten. Sinds september 2017 is dat zo. Daarvoor gold een licentie met een patentclausule waar veel bedrijven bezwaar tegen hadden, en die is onder druk van die kritiek vervangen.

Wat is het verschil tussen React en React Native?

React bouwt schermen voor de browser, React Native bouwt schermen voor telefoon-apps met dezelfde denkwijze en grotendeels dezelfde code. Het resultaat is een echte app en geen website in een omhulsel.

Heb ik React nodig voor een WordPress-website?

Nee. De pagina's van WordPress worden op de server in elkaar gezet en daar komt geen React aan te pas.

Je komt het alleen tegen als je zelf blokken of plugins voor de blokkeneditor maakt. Voor je bezoekers speelt het geen rol.

Is React goed voor SEO?

Dat ligt niet aan React maar aan de plek waar de pagina in elkaar wordt gezet. Wordt dat aan de browser overgelaten, dan ontvangt Google een leeg vel en moet hij er later op terugkomen. Bouwt de server hem op, dan ziet een zoekmachine hetzelfde als bij een gewone HTML-pagina.

Wat is JSX?

JSX is een schrijfwijze waarmee je HTML-achtige code in je JavaScript kunt zetten. Geen enkele browser begrijpt dat rechtstreeks, dus het wordt tijdens de bouwstap omgezet naar gewone JavaScript-functies.

Wat zijn hooks in React?

Hooks zijn functies waarmee een component toestand en gedrag krijgt, zoals useState voor gegevens die veranderen en useEffect voor dingen die buiten React gebeuren. Ze kwamen in februari 2019 met React 16.8 en vervingen de oudere manier met klassen.

Waarom draait mijn useEffect twee keer?

Omdat React sinds versie 18 in de ontwikkelmodus elk effect met opzet twee keer uitvoert. Daarmee komen effecten aan het licht die niet netjes opruimen wat ze starten.

In de gebouwde versie gebeurt dat niet. Zie je het alleen tijdens het ontwikkelen, dan is dit vrijwel altijd de verklaring.

Wat is de React Compiler?

Een onderdeel dat tijdens het bouwen je code bekijkt en zelf zorgt dat componenten niet onnodig opnieuw worden getekend. Dat deden programmeurs vroeger met de hand. Versie 1.0 kwam op 7 oktober 2025 uit en werkt terug tot React 17.

Moet ik nog met Create React App beginnen?

Nee. Het React-team heeft het op 14 februari 2025 afgeschaft. Begin met een raamwerk als Next.js, of met een los bouwgereedschap als je alleen een schermlaag nodig hebt.

Wat is het verschil tussen React en Next.js?

React tekent de schermen. Next.js is de laag eromheen die de rest van een website regelt: welke pagina bij welk adres hoort, waar die wordt opgebouwd, en wat er in de paginakop komt te staan. React kan zonder Next.js, andersom niet.

Maakt React mijn website langzamer?

Bij een informatieve site vrijwel altijd. De bezoeker haalt eerst code binnen die daarna het scherm moet tekenen, terwijl kant-en-klare HTML meteen leesbaar is.

Bij een applicatie draait het om. Daar win je juist tijd, omdat er na de eerste keer laden geen hele pagina's meer over de lijn hoeven.

Kan ik React op gewone webhosting draaien?

Ja, zolang je het project vooraf uitrekent tot losse bestanden. Dan zet je die map op elk pakket dat je al hebt. Zodra je pagina's op het moment van opvragen op de server wilt laten opbouwen, heb je een draaiend Node-proces nodig en houdt gedeelde hosting op.

Is React aan het verdwijnen?

Nee. Het heeft de grootste gebruikersgroep, de meeste vacatures en de meeste uitbreidingen, en het beheer ligt sinds 2026 bij een eigen stichting binnen de Linux Foundation. Wat wel verandert is de manier waarop je het gebruikt, en daardoor veroudert lesmateriaal in dit hoekje sneller dan gemiddeld.

Wat kost het om iets in React te laten bouwen?

Dat hangt van het scherm af, en de werkende demonstratie is meestal het goedkoopste deel. Het geld gaat op aan wat niet in de demonstratie zit: foutmeldingen, lege lijsten, een trage verbinding, iemand die twee keer op verzenden drukt, en het toetsenbord van mensen die geen muis gebruiken. Reken erop dat dat het grootste deel van de rekening is.