React is een essentiële tool geworden voor moderne webontwikkeling, en het instellen ervan op je computer is de eerste stap om te beginnen met het bouwen van verbazingwekkende gebruikersinterfaces.

Het is een populaire JavaScript bibliotheek voor het bouwen van UI’s, gericht op prestaties en herbruikbaarheid, en heeft een revolutie teweeggebracht in webontwikkeling door het gemakkelijker te maken om snelle, responsieve en onderhoudbare interfaces te maken die daadwerkelijk werken voor mensen.

De op componenten gebaseerde architectuur en de focus op real-world applicaties hebben het een aantrekkelijke keuze gemaakt voor developers die moderne webapplicaties willen bouwen.

In deze uitgebreide gids leiden we je door het installatieproces van React op Windows, macOS en Linux besturingssystemen. Maar laten we eerst het belang van React bespreken en hoe het je ontwikkelworkflow ten goede kan komen.

Let’s go!

Wat is React?

React homepagina.
React

React is een krachtige JavaScript bibliotheek die speciaal is ontworpen voor het bouwen van gebruikersinterfaces. Het werd in 2013 ontwikkeld door Jordan Walke, een software-engineer bij Facebook.

React richt zich op het maken en beheren van UI componenten, die herbruikbare stukken code zijn waarmee hun state beheerd kan worden en UI elementen kunnen renderen. De op componenten gebaseerde architectuur moedigt developers aan om modulaire en herbruikbare componenten te maken, waardoor de hoeveelheid dubbele code wordt verminderd en de ontwikkelingstijd wordt versneld.

Het gebruik van een virtuele DOM in React verbetert de rendering, wat leidt tot snellere en efficiëntere prestaties in vergelijking met traditionele DOM manipulatietechnieken. Deze focus op prestaties en herbruikbaarheid heeft React tot een populaire keuze onder developers gemaakt.

Door wie wordt React gebruikt?

React heeft aan populariteit gewonnen onder een breed scala aan developers, omdat het een krachtige en flexibele manier biedt om gebruikersinterfaces voor webapplicaties te bouwen. Hieronder vind je een aantal mensen die React vaak gebruiken:

  • Webdevelopers: Zij gebruiken React om aantrekkelijke en responsieve gebruikersinterfaces te maken voor websites en webapplicaties. Dankzij de op componenten gebaseerde architectuur van React kunnen ze modulaire applicaties bouwen die gemakkelijker te onderhouden en bij te werken zijn.
  • Front-end developers: Deze developers gebruiken React om gebruikersgerichte componenten te maken die communiceren met backend services en API’s. React vereenvoudigt het proces van het bouwen van complexe gebruikersinterfaces door ze op te splitsen in kleinere, beter beheersbare componenten.
  • Full-stack developers: Full-stack developers gebruiken React in combinatie met backend technologieën zoals Node.js, Express en MongoDB om uitgebreide webapplicaties te bouwen. De flexibiliteit van React maakt het gemakkelijk om te integreren met verschillende backendsystemen, waardoor het ontwikkelingsproces wordt gestroomlijnd.

Veel prominente bedrijven in de technologie-industrie gebruiken React ook, wat de veelzijdigheid en wijdverspreide applicatie aantoont. Enkele voorbeelden van bedrijven die React gebruiken in hun techstack zijn:

  • Facebook: Als bedenker van React gebruikt Facebook het op grote schaal in zijn webapplicaties, waaronder de Facebook hoofdsite, Instagram en WhatsApp Web.
  • Airbnb: Airbnb gebruikt React om zijn gebruikersinterfaces te bouwen, waardoor het een naadloze en krachtige ervaring kan creëren voor zijn gebruikers op verschillende platforms.
  • Netflix: Netflix gebruikt React om zijn webapplicatie te maken en maakt gebruik van de prestatieoptimalisaties en componentgebaseerde architectuur om een soepele gebruikerservaring te leveren.
  • Uber: Uber gebruikt React om zijn webapplicaties aan te sturen, waardoor het voor hen eenvoudiger wordt om intuïtieve en responsieve interfaces voor hun gebruikers te creëren.
  • Pinterest: Pinterest gebruikt de componentgebaseerde architectuur van React om een visueel verbluffende en zeer interactieve webapplicatie te bouwen voor gebruikers om creatieve ideeën te ontdekken en op te slaan.
  • Reddit: Reddit maakt gebruik van React om zijn webapplicatie te ontwikkelen en biedt een snelle en boeiende gebruikerservaring voor miljoenen gebruikers op het platform.
  • Dropbox: Dropbox maakt gebruik van de prestatieoptimalisaties en componentgebaseerde architectuur van React om een gebruiksvriendelijke en efficiënte webapplicatie te maken voor het beheren en delen van bestanden.

Door React te gebruiken, tonen deze bedrijven de kracht en flexibiliteit van deze populaire JavaScript bibliotheek, waardoor het een essentieële tool is voor moderne webontwikkeling.

Voordelen van het gebruik van React

React biedt verschillende voordelen die het een populaire keuze maken voor moderne webontwikkeling.

Hier zijn enkele belangrijke voordelen:

Op componenten gebaseerd ontwerp bevordert herbruikbaarheid

De architectuur van React stelt developers in staat om modulaire en herbruikbare componenten te maken, waardoor dubbele code wordt verminderd en het eenvoudiger wordt om applicaties te onderhouden en bij te werken. Deze aanpak bevordert consistentie en vereenvoudigt het ontwikkelproces.

Virtuele DOM voor betere prestaties

React gebruikt een virtuele DOM om rendering te optimaliseren, waardoor het sneller en efficiënter is dan traditionele DOM manipulatie. Door alleen de delen van de DOM bij te werken die zijn veranderd, minimaliseert React de tijd die wordt besteed aan rendering en verbetert het de algehele prestaties van applicaties.

Sterke ondersteuning vanuit de gemeenschap

De React gemeenschap is uitgebreid en zeer betrokken bij de ontwikkeling van de technologie. Ze delen regelmatig hun expertise via online platforms zoals forums, sociale media en blogs. Deze sterke ondersteuning van de gemeenschap zorgt ervoor dat React zich blijft ontwikkelen en verbeteren, terwijl het ook waardevolle bronnen biedt voor developers om van te leren en problemen op te lossen.

Breed scala aan bibliotheken en externe tools

Het React ecosysteem is enorm, met een overvloed aan bibliotheken en tools die beschikbaar zijn om developers te helpen bij het bouwen en optimaliseren van hun applicaties. Deze hulpmiddelen kunnen tijd en moeite besparen door vooraf gemaakte oplossingen en verbeteringen te bieden voor veelvoorkomende taken en uitdagingen.

Populaire keuze voor moderne webontwikkeling

React is wijdverspreid onder developers en bedrijven, waardoor het een populaire keuze is geworden voor het bouwen van moderne webapplicaties. Deze populariteit betekent dat er veel vraag is naar developers met React vaardigheden, waardoor het een waardevolle vaardigheid is voor de arbeidsmarkt.

Vereisten React

Voordat je begint met het installeren en gebruiken van React, is het essentieel om over enige basiskennis en -tools te beschikken. Hier zijn de vereisten om met React aan de slag te gaan:

  • Basiskennis van HTML, CSS en JavaScript: Bekendheid met deze belangrijkste webtechnologieën is noodzakelijk om te begrijpen hoe je componenten in React kunt bouwen en stylen.
  • Bekendheid met opdrachtregel/terminal: Bij React ontwikkeling worden vaak command-line tools en -interfaces gebruikt, dus het is belangrijk dat je vertrouwd bent met het navigeren en uitvoeren van commando’s in de terminal of opdrachtprompt van je systeem.
  • Node.js en npm geïnstalleerd: React vertrouwt op Node.js en npm (Node Package Manager) voor het beheren van dependencies en het uitvoeren van build scripts. Zorg ervoor dat je beide op je systeem geïnstalleerd hebt voordat je verder gaat met de installatie van React.

Systeemvereisten

Voordat je React installeert, is het belangrijk om ervoor te zorgen dat je systeem voldoet aan de noodzakelijke vereisten. Dit is wat je nodig hebt:

  • Besturingssysteem: Windows 10 of 11, macOS 10.10 of Ubuntu 16 worden aanbevolen voor de beste compatibiliteit en prestaties.
  • Hardware: Ten minste 4GB RAM en 10GB opslagruimte zijn nodig om React en de bijbehorende tools soepel te laten werken.
  • Een webbrowser en internettoegang: Een moderne webbrowser (zoals Google Chrome, Mozilla Firefox of Microsoft Edge) en internettoegang zijn nodig voor het bekijken en testen van je React applicaties.
  • Node.js en npm geïnstalleerd: Zoals eerder vermeld, vertrouwt React op Node.js en npm voor het beheren van dependencies en het uitvoeren van build scripts. Zorg ervoor dat je beide op je systeem geïnstalleerd hebt.

React installeren

Elk besturingssysteem heeft iets andere vereisten bij het installeren van React. Volg de instructies hieronder voor het besturingssysteem dat je gebruikt.

React installeren op Windows

In dit gedeelte leiden we je door het installatieproces van React op een Windows machine.

Volg deze stappen om te beginnen:

  1. Installeer Node.js en npm
  2. Installeer Create React App
  3. Maak een nieuw React project
  4. Ga naar de projectmap en start de ontwikkelserver

Stap 1: Installeer Node.js en npm

Voordat je React installeert, moet je Node.js en npm (Node Package Manager) op je systeem geïnstalleerd hebben. Als je ze nog niet hebt geïnstalleerd, volg dan deze stappen:

  1. Bezoek de Node.js downloadpagina op: https://nodejs.org/en/download/
  2. Download het installatieprogramma voor je Windows systeem (de LTS of Current versie is prima, maar de LTS versie wordt aanbevolen voor de meeste gebruikers)
  3. Om Node.js en npm te installeren, voer je het installatieprogramma uit en volg je zorgvuldig de gegeven aanwijzingen.
Het Node.Js installatieprogramma voor Windows downloaden.
Het Node.Js installatieprogramma voor Windows downloaden.

Nadat de installatie is voltooid, kun je controleren of Node.js en npm zijn geïnstalleerd door een opdrachtprompt te openen en de volgende opdrachten uit te voeren:

node -v npm -v

Deze commando’s zouden de versienummers voor respectievelijk Node.js en npm moeten weergeven.

Stap 2: Installeer Create React App

Create React App is een opdrachtregeltool die het opzetten van een nieuw React project met een aanbevolen projectstructuur en configuratie vereenvoudigt. Om Create React App globaal te installeren, open je een opdrachtprompt en voer je het volgende commando uit:

npm install -g create-react-app

Dit commando installeert Create React App op je systeem, waardoor het beschikbaar is voor gebruik in elke map.

Stap 3: Maak een nieuw React project

Nu je Create React App geïnstalleerd hebt, kun je het gebruiken om een nieuw React project te maken. Open hiervoor een opdrachtprompt, ga naar de map waar je het project wilt hebben en voer het volgende commando uit:

create-react-app my-app

Vervang “my-app” door de gewenste naam voor je project. Create React App maakt een nieuwe map met de opgegeven naam en genereert een nieuw React project met een aanbevolen projectstructuur en configuratie.

Stap 4: Ga naar de projectmap en start de ontwikkelserver

Zodra het project is gemaakt, ga je naar de projectmap door de volgende opdracht uit te voeren op de opdrachtprompt:

cd my-app

Vervang “my-app” door de naam van je projectmap. Start nu de ontwikkelserver met het volgende commando:

npm start

Dit commando start de ontwikkelserver, die wacht op wijzigingen in je projectbestanden en de browser automatisch opnieuw laadt als er wijzigingen worden gedetecteerd.

Er zou een nieuw browservenster moeten openen met je React applicatie op http://localhost:3000/ die er als volgt uitziet:

React is met succes geïnstalleerd op Windows.
React is met succes geïnstalleerd op Windows.

Gefeliciteerd! Je hebt React met succes geïnstalleerd op je Windows machine en een nieuw React project gemaakt. Je kunt nu beginnen met het bouwen van je gebruikersinterfaces met React.

React installeren op macOS

Laten we nu het installatieproces van React doorlopen op een computer met macOS:

  1. Installeer Node.js en npm
  2. Installeer Create React App op je macOS
  3. Maak een nieuw React project
  4. Ga naar de projectmap en start de ontwikkelserver

Stap 1: Installeer Node.js en npm

Net als bij het installatieproces voor Windows, moet je Node.js en npm (Node Package Manager) ook op je macOS systeem geïnstalleerd hebben. Als je ze nog niet hebt geïnstalleerd, volg dan deze stappen:

  1. Bezoek de Node.js downloadpagina
  2. Download het installatieprogramma voor macOS
Het Node.js installatieprogramma voor macOS downloaden.
Het Node.js installatieprogramma voor macOS downloaden.
  1. Klik na het downloaden op het .pkg bestand in je Downloads map om het installatieprogramma uit te voeren.
  2. Volg de instructies die op je scherm verschijnen, waaronder het accepteren van de licentieovereenkomst, het selecteren van de doelbestemming voor de geïnstalleerde bestanden en het selecteren van het installatietype.
Volg de aanwijzingen op het scherm om de installatie van Node.js te voltooien.
Volg de aanwijzingen op het scherm om de installatie van Node.js te voltooien.

Nadat de installatie is voltooid, kun je controleren of Node.js en npm zijn geïnstalleerd door een terminal te openen en de volgende commando’s uit te voeren:

node -v
npm -v

Deze commando’s zouden de versienummers van respectievelijk Node.js en npm moeten weergeven.

Je kunt Node.js en npm ook via de opdrachtregel installeren. Open hiervoor Terminal en voer in:

brew install node

Wacht tot de installatie is voltooid en controleer dan de installatie op dezelfde manier als hierboven, door in te voeren:

node -v

En vervolgens:

npm -v

Stap 2: Installeer Create React App op je macOS

Laten we nu beginnen met het installeren van Create React App op macOS.

Create React App is een handige manier om een applicatie met één pagina op te zetten met minimale stappen en zonder configuratie.

Laten we verder gaan met de installatiestappen.

Open eerst de terminal en maak een map aan met de naam react-app door het volgende commando in te typen:

mkdir react-app

Navigeer vervolgens naar de map react-app met dit commando:

cd react-app

Om te controleren of je in de juiste map bent, typ je het volgende commando en druk je op Enter:

pwd

Zodra je hebt bevestigd dat je in de juiste map zit, kun je een nieuw React-project maken.

Stap 3: Maak een nieuw React project

Nu je Create React App hebt geïnstalleerd, kun je het gebruiken om een nieuw React project te maken. Typ het onderstaande commando:

npx create-react-app my-app

npx is een module die wordt meegeleverd met npm. De installatiestappen zullen even duren, dus wees geduldig.

Stap 4: Ga naar de projectmap en start de ontwikkelserver

Nadat het commando succesvol is uitgevoerd, navigeer je naar de map my-app:

cd my-app

Typ ten slotte:

npm start

Na succesvolle uitvoering van het commando wordt je standaardwebbrowser geopend op

http://localhost:3000/:

Na een succesvolle installatie zou je het React logo in je webbrowser moeten zien.
Na een succesvolle installatie zou je het React logo in je webbrowser moeten zien.

En dat was het! React is nu geïnstalleerd en klaar voor gebruik op je macOS.

React installeren op Linux

Als je een Linux systeem hebt, kun je deze stappen volgen om React te installeren:

  1. Installeer npm
  2. Installeer de tool create-react-app
  3. Maak en start je eerste React applicatie

Stap 1: Installeer npm

Log in op je server als sudo gebruiker en voer het volgende commando uit:

sudo apt install npm

Zodra de installatie is voltooid, controleer je de geïnstalleerde versie van npm met het commando:

npm --version

De installatie van npm installeert ook Node.js. Controleer de geïnstalleerde versie van Node met het commando:

node --version

Stap 2: Installeer de driver create-react-app

create-react-app is een driver waarmee je alle tools kunt instellen die nodig zijn voor een React applicatie.

Het bespaart tijd en moeite door alles vanaf nul in te stellen, wat je een goede start geeft.

Voer het volgende npm commando uit om de driver te installeren:

sudo npm -g install create-react-app

Eenmaal geïnstalleerd, bevestig de versie van create-react-app door dit uit te voeren:

create-react-app --version

Stap 3: Maak en start je eerste React-applicatie

Het maken van een React applicatie is eenvoudig en ongecompliceerd. We maken als volgt een React app met de naam my-app:

create-react-app my-app

Dit proces duurt ongeveer 5 minuten om alle pakketten, bibliotheken en tools te installeren die de applicatie nodig heeft. Geduld is belangrijk hier.

Als de applicatie succesvol is aangemaakt, ontvang je een melding met de basiscommando’s die je kunt uitvoeren om de applicatie te gaan beheren.

Om de applicatie uit te voeren, navigeer je naar de app directory:

cd my-app

Voer dan het commando uit:

npm start

Je ziet een uitvoer die laat zien hoe je de applicatie in de browser kunt openen.

Open je browser en navigeer naar het IP adres van je server:

http://server-ip:3000

En net als bij de installatieprocessen voor Windows en macOS zou je het React logo in je browser moeten zien:

Na de installatie zou je het React logo in je browser moeten zien.
Na de installatie zou je het React logo in je browser moeten zien.

Dit toont aan dat de standaard React app werkt.

Je hebt React nu met succes geïnstalleerd op Linux en een applicatie gemaakt in React!

Samenvatting

Hopelijk heb je iets gehad aan deze rondleiding door het installatieproces van React op Windows, macOS en Linux. We hebben de vereisten en systeemvereisten behandeld die nodig zijn om een React ontwikkelomgeving op te zetten, evenals de installatie van Node.js en npm. We hebben ook gedemonstreerd hoe je de driver create-react-app gebruikt om een nieuw React project te maken en een ontwikkelserver te starten.

Nu je React op je machine hebt geïnstalleerd, is het tijd om het een kans te geven en te beginnen met het volgen van tutorials, het leren van best practices en het uitzoeken hoe je verbazingwekkende gebruikersinterfaces kunt bouwen. Het ontwerp, de prestatievoordelen en de sterke ondersteuning van de gemeenschap maken React een uitstekende keuze voor moderne webontwikkeling.

Naarmate je verder komt in je React reis, kun je overwegen om de Applicatie Hosting Diensten van Kinsta te gebruiken voor je React projecten. Kinsta biedt een krachtig, schaalbaar en veilig hostingplatform dat je kan helpen het maximale uit je React applicaties te halen.

Veel succes!