Summary  
This chapter covers scaffolding a code project using a CLI tool, managing dependencies with a package manager, and launching a live-reloading development server to begin customizing the application structure.

General domain of usage  
Front-end web development

## Stap 6: Initialiseren van het project
Gebruik de terminal om het project op te zetten. Open de terminal in je code-editor (indien deze nog niet open is), voer het volgende commando uit en druk op Enter:
```
npm create vite@latest .
```


Wanneer hierom wordt gevraagd, selecteer **React** als framework met behulp van de pijltjestoetsen:

Kies vervolgens **JavaScript** of **TypeScript**, afhankelijk van de voorkeur:

Na het voltooien van de setup vraagt Vite om de afhankelijkheden te installeren. Voer het volgende commando uit:
```
npm install
```

Zodra de installatie is voltooid, start de ontwikkelserver met het volgende commando:
```
npm run dev
```

Na het uitvoeren van deze commando's verschijnt er een lokale ontwikkel-URL — meestal: `http://localhost:5173/`. Open deze link in de browser om de applicatie live te bekijken.

## Stap 7: Beginnen met aanpassen
Het project is opgezet, je kunt beginnen met het aanpassen ervan:
- Het meeste werk vindt plaats in de **src**-map;
- Je vindt standaardbestanden zoals `App.jsx` en `main.jsx`, die je kunt wijzigen of vervangen op basis van de behoeften van je project;
- Als je eerder in CodeSandbox hebt gewerkt, kun je je vertrouwde structuur opnieuw opzetten: zorg ervoor dat je een `main.jsx` hebt (het Vite-equivalent van `index.js`) als entrypoint en bouw je hoofdapplicatie in `App.jsx`;
- Maak extra mappen aan indien nodig om je componenten, stijlen en assets te organiseren.

Met welk commando start je een nieuw React-project met Vite?

Leer dynamische, interactieve gebruikersinterfaces bouwen met React. Begrijp kernconcepten zoals JSX, de virtuele DOM en herbruikbare componentgebaseerde architectuur. Pas stylingtechnieken toe met inline stijlen, externe CSS en CSS-modules voor schaalbaar ontwerp. Beheer state en neveneffecten efficiënt met React Hooks en deel data tussen componenten met Context.

Verkrijg inzicht in de kernprincipes van React. U maakt kennis met JSX (JavaScript XML), het bouwen van herbruikbare UI-componenten en het renderen van elementen. Daarnaast wordt het belang van gegevensverzameling en conditionele rendering in React-toepassingen behandeld. Aan het einde van deze sectie beschikt u over een solide basis van de essentiële concepten van React, waarmee u goed voorbereid bent op de meer geavanceerde onderwerpen in de volgende secties.

Ontdek de verschillende methoden voor het toevoegen van stijlen aan React-toepassingen. U leert hoe u stijlen toepast op individuele componenten, gebruikmaakt van dynamische stijlen en een schaalbare en onderhoudbare stylingaanpak hanteert in uw projecten.

Krachtige functies in moderne React-ontwikkeling. Hooks veranderen de manier waarop we functionele componenten schrijven, door een beknopte en intuïtieve methode te bieden voor statusbeheer en het uitvoeren van neveneffecten. Context daarentegen maakt het mogelijk om gegevens te delen via de componentenboom zonder prop drilling. Door hooks en Context te combineren, ontstaat efficiënt statusbeheer en vereenvoudigde gegevensdeling in React-toepassingen.

Stapsgewijze handleiding voor het starten van een real-world React-project. Van het opzetten van uw ontwikkelomgeving tot het begrijpen van projectorganisatie en essentiële tools, u verwerft de kennis en het vertrouwen om aan uw React-traject te beginnen.

Een React-Project Starten en Uitvoeren met Vite

Stap 6: Initialiseren van het project

Stap 7: Beginnen met aanpassen

Awesome!

Een React-Project Starten en Uitvoeren met Vite

Stap 6: Initialiseren van het project

Stap 7: Beginnen met aanpassen