Wat is React?

Definitie: React is een open source JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces, vooral voor webapplicaties waarin schermen snel en zonder herladen reageren op wat de gebruiker doet. Je bouwt een interface op uit herbruikbare componenten, en React zorgt dat alleen de delen van de pagina die veranderen opnieuw worden getoond.

In het kort

• React is ontwikkeld door Jordan Walke bij Facebook (nu Meta) en verscheen in mei 2013 als open source; het is gratis te gebruiken onder de MIT-licentie.
• Kernbegrippen zijn componenten, JSX, state, props en de virtual DOM.
• React is een bibliotheek voor de voorkant, geen compleet framework: voor routing, gegevensbeheer en de server gebruik je aanvullende tools of een framework zoals Next.js.
• Volgens Wikipedia is React in februari 2026 ondergebracht bij de React Foundation onder de Linux Foundation.

Wat is React?

Een moderne webapplicatie bestaat uit schermen die voortdurend veranderen. Je vinkt een taak af en het overzicht past zich aan. Je typt in een zoekveld en de resultaten verschijnen direct. Je opent een melding en de teller bovenin gaat omlaag. Al die kleine updates met gewoon JavaScript bijhouden, wordt bij een grotere applicatie snel onoverzichtelijk.

React lost dat op. Je beschrijft hoe een scherm eruit moet zien bij een bepaalde situatie, en React zorgt dat de pagina in de browser daarmee in lijn blijft. Verandert de situatie, bijvoorbeeld omdat een gebruiker op een knop klikt, dan rekent React uit wat er anders moet en past alleen dat aan.

React wordt ook wel React.js of ReactJS genoemd. Het is een van de meest gebruikte technieken voor de voorkant van webapplicaties. Bekende diensten zoals Facebook, Instagram en Netflix gebruiken React, noemt Kinsta.

Waar komt React vandaan?

React is ontwikkeld door Jordan Walke, softwareontwikkelaar bij Facebook. Volgens Ardura werd het vanaf 2011 intern gebruikt en in 2013 open source gemaakt; Wikipedia noemt 29 mei 2013 als datum van de eerste publieke versie. Facebook bouwde React om de complexe interface van het eigen platform beheersbaar te houden.

Belangrijke momenten in de ontwikkeling:

Hoe werkt React?

React draait om een paar kernbegrippen.

Componenten. Een interface bestaat uit losse bouwblokken, zoals een knop, een formulier, een kaart met klantgegevens of een complete pagina. Elk component is een stukje code dat bepaalt hoe dat onderdeel eruitziet en zich gedraagt. Componenten zijn herbruikbaar en kunnen in elkaar worden genest.

JSX. React-code wordt meestal geschreven in JSX, een schrijfwijze waarmee je HTML-achtige opmaak direct in JavaScript zet. Dat maakt componenten leesbaar. Een hulpmiddel zoals Babel vertaalt JSX naar gewone JavaScript die de browser begrijpt.

State. De gegevens die binnen een component kunnen veranderen, zoals de tekst in een invoerveld of of een menu open is. Verandert de state, dan toont React het component opnieuw.

Props. Gegevens die een bovenliggend component doorgeeft aan een onderliggend component, bijvoorbeeld de naam van een klant die een kaartje moet tonen. Props kunnen door het ontvangende component niet worden gewijzigd.

Virtual DOM. De DOM is de structuur van een webpagina in de browser. Die rechtstreeks aanpassen is relatief traag. React houdt daarom een kopie in het geheugen bij, de virtual DOM, vergelijkt bij elke wijziging de oude en nieuwe situatie en voert alleen de verschillen door in de echte pagina.

Hooks. Functies zoals useState en useEffect waarmee een component state kan bijhouden of kan reageren op gebeurtenissen. Sinds de introductie in 2019 zijn functiecomponenten met hooks de gangbare manier om React te schrijven.

Waarvoor gebruik je React?

• Webapplicaties en SaaS-producten met veel interactie, zoals dashboards, planningstools en klantportalen.
• Single page applications, waarbij de applicatie op één webpagina draait en schermen wisselen zonder volledige herlaadbeurt.
• Mobiele apps via React Native, met dezelfde manier van denken in componenten.
• Desktopapps via Electron. Codecademy noemt Visual Studio Code en Slack als voorbeelden van desktopapps die op die basis zijn gebouwd.
• Herbruikbare interfacebibliotheken, zodat meerdere applicaties dezelfde knoppen, formulieren en tabellen gebruiken.

Monkey Vision wijst erop dat React geen goede keuze is voor eenvoudige informatieve websites. Daarvoor is een klassiek CMS zoals WordPress sneller en goedkoper.

React, Vue of Angular?

Codecademy beschrijft het verschil met Angular zo: Angular is een volledig framework dat de hele structuur van een applicatie levert, terwijl React alleen de view-laag verzorgt. Bij React kies je zelf de aanvullende bibliotheken, wat flexibel is maar ook meer keuzes vraagt.

React en Next.js

Omdat React alleen de interface verzorgt, wordt het voor complete applicaties vaak gecombineerd met een framework. Wikipedia noemt Next.js en React Router als aanbevolen opties voor full-stack applicaties. Next.js voegt onder meer routing, rendering op de server en optimalisaties voor snelheid en vindbaarheid toe. Ardura noemt Next.js een full-stack framework bovenop React.

Voor de start van een nieuw project wordt tegenwoordig vaak Vite of een framework gebruikt. Create React App, lange tijd de standaard startset, is volgens Guru99 in februari 2025 officieel uitgefaseerd.

Voordelen en nadelen van React

Voordelen

• Herbruikbare componenten, wat ontwikkeling versnelt en de interface consistent houdt.
• Snelle interfaces door de virtual DOM.
• Groot ecosysteem met bibliotheken voor bijna elke behoefte.
• Veel ontwikkelaars beschikbaar, waardoor je minder afhankelijk bent van één partij.
• Gratis en open source, met brede steun.

Nadelen

• Geen complete oplossing. Routing, formulieren en gegevensbeheer vragen extra keuzes.
• Snelle ontwikkeling. Werkwijzen en tools veranderen regelmatig, wat onderhoud vraagt.
• Minder geschikt voor eenvoudige sites. Een informatieve website is met een CMS vaak eenvoudiger.
• Vindbaarheid vraagt aandacht. Een React-app die alleen in de browser wordt opgebouwd, is minder goed vindbaar dan een pagina die op de server wordt gemaakt; frameworks zoals Next.js lossen dat op.

React en de backend

React draait in de browser en verzorgt wat de gebruiker ziet. Gegevens opslaan, gebruikers laten inloggen, rechten bewaken en berekeningen uitvoeren gebeurt in de backend. React haalt die gegevens op via een API. De backend kan in elke taal zijn gebouwd, bijvoorbeeld met Node.js of met een PHP-framework zoals Laravel. Die scheiding maakt het mogelijk om de voorkant en de achterkant los van elkaar te ontwikkelen en te vervangen.

Voorbeeld: een scherm opgebouwd uit componenten

Neem een overzichtsscherm in een klantportaal. In React bestaat dat scherm uit een paar componenten: een navigatiebalk, een zoekveld, een lijst met projecten en per project een kaart met naam, status en datum. Het zoekveld houdt de ingetypte tekst bij als state. De lijst krijgt de gefilterde projecten als props en toont voor elk project een kaart. Typt de gebruiker een letter, dan past React alleen de lijst aan; de navigatie en het zoekveld blijven staan. Dezelfde projectkaart kun je op een andere pagina opnieuw gebruiken, bijvoorbeeld in een dashboard voor medewerkers.

Waar let je op als je een React-applicatie laat bouwen?

1. Vraag welk framework of welke startset wordt gebruikt, zoals Next.js of Vite, en waarom.
2. Vraag naar TypeScript. Typecontrole maakt grotere React-projecten beter onderhoudbaar.
3. Vraag hoe gegevensbeheer is geregeld en welke bibliotheken daarvoor worden gebruikt.
4. Vraag naar tests van belangrijke schermen en functies.
5. Let op vindbaarheid als pagina’s door zoekmachines gevonden moeten worden.
6. Spreek af hoe updates van React en de gebruikte pakketten worden bijgehouden.
7. Zorg dat de broncode in jouw beheer is of dat je er toegang toe hebt.
8. Vraag om korte documentatie van de opbouw, zodat een andere ontwikkelaar later snel kan aansluiten.
9. Let op toegankelijkheid, zodat de interface ook met toetsenbord en schermlezer bruikbaar is.

Wat betekent dit voor jouw project?

Voor de meeste opdrachtgevers is de keuze voor React minder belangrijk dan de vraag wat de applicatie moet doen. Ik begin daarom bij de gebruiker: wie gaat het gebruiken, en welke taak moet die persoon als eerste kunnen afronden? Daaruit volgt hoeveel interactie een scherm nodig heeft, en of een bibliotheek als React daarbij helpt.

Belangrijk is wel dat je kiest voor gangbare techniek met een grote groep ontwikkelaars. React voldoet daaraan. Zo ben je niet afhankelijk van één persoon als je later met iemand anders verder wilt.

Wil je een webapplicatie laten bouwen? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Lees ook hoe ik een webapplicatie bouw.

Veelgestelde vragen over React

Wat is React?

React is een open source JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces van webapplicaties. Je bouwt schermen op uit herbruikbare componenten, en React werkt alleen de delen van de pagina bij die veranderen.

Is React een framework of een bibliotheek?

React is officieel een bibliotheek, omdat het alleen de gebruikersinterface verzorgt. Voor routing, gegevensbeheer en rendering op de server combineer je React met aanvullende bibliotheken of met een framework zoals Next.js.

Wat is het verschil tussen React JS en React Native?

React JS wordt gebruikt voor interfaces in de webbrowser. React Native gebruikt dezelfde principes om mobiele apps voor iOS en Android te bouwen met echte native onderdelen.

Verwante termen

Next.js · React Native · Vue.js · TypeScript · Framework · Webapplicatie