Het opzetten van een React-ontwikkelomgeving is eenvoudig gemaakt

De eerste stappen in webontwikkeling met React kunnen een spannende uitdaging zijn. Je bent hier omdat je wilt leren hoe je snel en efficiënt je ontwikkelingsomgeving kunt opzetten en je eerste project kunt starten. Deze handleiding begeleidt je bij de stappen die nodig zijn om een React-applicatie te maken met Vite als Build-Tool.

Belangrijkste bevindingen

Om een React-ontwikkelingsomgeving op te zetten, heb je Visual Studio Code, Node.js en NPM nodig. Met de juiste commando's en tools kun je in een mum van tijd je eerste React-applicatie maken en bekijken in de browser.

Stap-voor-stap handleiding

Opzetten van de ontwikkelingsomgeving

Voordat je daadwerkelijk begint met ontwikkelen, moet je ervoor zorgen dat je over de juiste tools beschikt. Ten eerste moet je Visual Studio Code installeren. Het is een populair en gratis ontwikkelingsplatform van Microsoft, speciaal ontworpen voor JavaScript-ontwikkeling. Om Visual Studio Code te downloaden, bezoek je de officiële website en volg je de instructies voor downloaden en installeren.

NaaNaaast Visual Studio Code heb je ook Node.js nodig, dat de JavaScript-runtime en NPM, de Pakketbeheerder, levert. Je kunt Node.js downloaden van de Node.js-website. Ga naar de downloadpagina en kies de LTS-versie (Long-Term Support) om een stabiele en bewezen versie te krijgen.

Installatie en controle van Node.js en NPM

Nadat je Node.js hebt geïnstalleerd, moet je controleren of alles correct is geïnstalleerd. Open hiervoor een terminal. Je kunt dit rechtstreeks in Visual Studio Code doen door te klikken op "Terminal" en vervolgens op "Nieuwe terminal". Voer in het terminalvenster het commando npm -v in. Als het versienummer niet wordt weergegeven, heb je mogelijk een probleem met de installatie.

Je moet ook controleren of Node.js goed werkt. Dit kun je doen door het commando node -v in de terminal in te voeren. Beide commando's zouden de geïnstalleerde versie van NPM en Node.js moeten teruggeven.

Aanmaken van het nieuwe project met Vite

De volgende stap is om een nieuw project aan te maken. Hiervoor gebruik je npm create vite, gevolgd door de naam van je applicatie. In dit voorbeeld werken we met een "To-Do App". Dit start een wizard die je verschillende opties biedt. Je wordt gevraagd of je React of een ander framework wilt gebruiken. Kies "React".

Vervolgens wordt er ook gevraagd of je React wilt gebruiken met TypeScript. Voor beginners is het raadzaam om zonder TypeScript te werken, kies daarom de standaardoptie "React".

Verandering naar de projectdirectory

Nadat het project succesvol is aangemaakt, navigeer je naar de nieuw aangemaakte map van je applicatie. Dit doe je met het commando cd todo-app. Zodra je daar bent aangekomen, moet je de benodigde pakketten installeren. Voer het commando npm install in de terminal in. Dit installeert alle benodigde afhankelijkheden, inclusief React.

Starten van de ontwikkelingsserver

Nu komt het spannende gedeelte: je kunt de ontwikkelingsserver starten! Voer het commando npm run dev in. Hiermee start je de ontwikkelingsserver van Vite, en krijg je een URL waarmee je je applicatie in de browser kunt bekijken.

Open een moderne webbrowser en voer het opgegeven adres in. Je zou een eenvoudige webpagina moeten zien met een draaiend logo en wat tekst, en een knop die een teller weergeeft.

Aanpassingen aan de applicatie

Om een eerste indruk van de functionaliteit te krijgen, kun je kleine aanpassingen maken aan je applicatie. Open het bestand src/main.jsx en verander de tekst in de App-component. Sla het bestand op en bekijk hoe de wijzigingen onmiddellijk in de browser worden bijgewerkt, zonder dat je de pagina opnieuw hoeft te laden. Dit laat zien hoe efficiënt de Hot Reloading-functie in Vite werkt - een uitstekende functie voor snelle feedback tijdens de ontwikkeling.

Merk op dat de teller behouden blijft, zelfs als de tekst wordt bijgewerkt. Dit is een van de sterke punten van React: de status blijft behouden, zelfs als de gebruikersinterface wordt vernieuwd.

Samenvatting

Je hebt succesvol je ontwikkelomgeving opgezet, Node.js en NPM geïnstalleerd, een nieuw React-project aangemaakt en het werkend gekregen in je browser. De basisprincipes van het opzetten van een React-app met Vite zijn gelegd, en je kunt nu beginnen met je eerste toepassing.