Je eerste React-app met Vite

Ik laat je zien: het project opzetten

Vite (uitgesproken als “veet”, Frans voor “snel”) is een tool die een kant-en-klaar React-projectskelet voor je klaarzet. Open de terminal en ga naar waar je het project wilt (bijvoorbeeld je bureaublad):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite kan iets vragen – bevestig met Enter. Dan:

cd my-react-web
npm install
npm run dev -- --port 3901

npm install downloadt alles wat het project nodig heeft (het duurt even – React en helpers komen in de map node_modules).
npm run dev -- --port 3901 start de ontwikkelserver. De terminal toont het adres http://localhost:3901. Open het in je browser.

Zie je een draaiend logo en de kop “Vite + React”? Gefeliciteerd – je eerste React-app draait! 🎉

💡

Wat is localhost? Een “server” die alleen op je computer draait. Alleen jij kunt hem zien – het is je privé-testterrein. En het beste: als je de code verandert en opslaat, ververst de pagina zichzelf meteen. Geen eindeloos F5 meer!

Rondleiding door het project

Open de map my-react-web in VS Code (File → Open Folder). Het lijkt veel bestanden, maar er zijn er nu maar drie belangrijk:

Bestand	Wat het is
`index.html`	de enige HTML van de hele website – bijna leeg, alleen een `<div id="root">`
`src/main.jsx`	de starter: neemt de app en plaatst hem in die div
`src/App.jsx`	de hoofdcomponent – hier schrijf je code
`src/App.css`	stijlen – gewone CSS, zoals je die kent

Negeer de rest voorlopig (open of verwijder nooit node_modules, package.json is een lijst van de packages van het project).

Je eerste codewijziging

Open src/App.jsx. Verwijder alles en schrijf:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Opslaan – en de pagina in de browser veranderde vanzelf. Dit zie je:

De App-component is een functie die HTML teruggeeft (deze notatie heet JSX).
{name} – accolades voegen JavaScript in HTML in. Alles: een variabele, een berekening {2 + 3}, zelfs een voorwaarde.
export default App – “ik bied deze component aan andere bestanden aan” (main.jsx neemt hem).

JSX heeft twee eigenaardigheden waar je aan went: in plaats van class schrijf je className (class is een gereserveerd woord in JavaScript), en een component moet één wrapper-element teruggeven (daarom staat er een <div> om alles).

Nu jij 💪

Zet het project op volgens de handleiding en laat het draaien.
Bewerk App.jsx: een kop met je naam, een alinea over wat je bouwt, en een variabele age die je toont in de zin I am {age} years old.
Verwijder expres een sluittag en kijk hoe de fout eruitziet – Vite toont hem in de browser, met regelnummer. Fix hem daarna.
Stop de server (Ctrl+C in de terminal) en start opnieuw (npm run dev -- --port 3901) – om de hele cyclus onder de vingers te krijgen.

✅

Controleer jezelf: Het project draait op localhost, je kunt stoppen en starten, en als je App.jsx bewerkt en opslaat, tekent de browser zichzelf opnieuw. De ontwikkelaarscyclus draait!

Wat neem je mee uit deze les

npm create vite@latest zet een project op, npm install downloadt packages, npm run dev start localhost.
Je schrijft code in src/App.jsx: een component is een functie die JSX teruggeeft, {} voegt JavaScript in HTML in.
In JSX: className in plaats van class, altijd één wrapper-element.

Deze les maakt deel uit van een betaald niveau

Ik laat je zien: het project opzetten

Rondleiding door het project

Je eerste codewijziging

Nu jij 💪

Wat neem je mee uit deze les