Het kleinste React-voorbeeld ziet er als volgt uit:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root'));Het toont een kop met de tekst “Hallo, wereld!” op de pagina.
Probeer het op CodePen
Klik op de bovenstaande link om een online editor te openen. Voel je vrij om wat veranderingen aan te brengen, en zie hoe ze de uitvoer beïnvloeden. De meeste pagina’s in deze gids hebben bewerkbare voorbeelden zoals deze.
Hoe deze gids te lezen
In deze gids zullen we de bouwstenen van React-apps bekijken: elementen en componenten. Als je die eenmaal onder de knie hebt, kun je complexe apps maken van kleine herbruikbare stukjes.
Tip
Deze gids is ontworpen voor mensen die liever stap voor stap concepten leren. Als u liever leert door te doen, bekijk dan onze praktische handleiding. Misschien vind je deze gids en de tutorial complementair aan elkaar.
Dit is het eerste hoofdstuk in een stap-voor-stap gids over de belangrijkste React-concepten. Je kunt een lijst van alle hoofdstukken vinden in de navigatiebalk. Als je dit leest vanaf een mobiel apparaat, kun je de navigatie openen door op de knop rechtsonder in je scherm te drukken.
Elk hoofdstuk in deze gids bouwt voort op de kennis die in eerdere hoofdstukken is geïntroduceerd. Je kunt het meeste van React leren door de hoofdstukken van de gids “Belangrijkste concepten” te lezen in de volgorde waarin ze in de zijbalk staan. Zo is “Introducing JSX” het volgende hoofdstuk na dit hoofdstuk.
Aannames kennisniveau
React is een JavaScript-bibliotheek, en dus gaan we ervan uit dat je een basiskennis van de JavaScript-taal hebt. Als u zich niet helemaal zeker voelt, raden we u aan een JavaScript-handleiding te lezen om uw kennisniveau te controleren en deze gids te kunnen volgen zonder te verdwalen. Het kost je misschien tussen de 30 minuten en een uur, maar daardoor hoef je niet het gevoel te hebben dat je tegelijkertijd zowel React als JavaScript aan het leren bent.
Note
In deze gids wordt af en toe wat nieuwere JavaScript-syntaxis gebruikt in de voorbeelden. Als je de afgelopen jaren niet met JavaScript hebt gewerkt, zou je met deze drie punten een heel eind moeten komen.
Laten we aan de slag gaan!
Blijf naar beneden scrollen, en je vindt de link naar het volgende hoofdstuk van deze handleiding vlak voor de footer van de website.