Frequently Asked Questions
Frequently Asked Questions
Deze pagina bevat een aantal veel terugkomende vragen. Doorheen het jaar kan deze pagina uitgebreid worden. Heb je een suggestie, is er iets wat ontbreekt, dan mag je dit altijd via mail (sebastiaan.henau@thomasmore.be) of via de issue tracker laten weten.
Hoe start ik een nieuw React project?
Een nieuw React project wordt aangemaakt via het commando
pnpm create vite projectNaam --template react
waar projectNaam logischerwijs vervangen wordt met de naam van het nieuwe project. Dit commando produceert een nieuwe map projectNaam die het nieuwe React project bevat. Deze map wordt aangemaakt als submap van de locatie waar het commando uitgevoerd wordt. Als de terminal zich, bijvoorbeeld, bevindt in C:\projects, dan zal het commando pnpm create vite projectNaam --template react een nieuwe map C:\projects\voorbeeld-project aanmaken.
Bovenstaand commando genereert enkel de mappenstructuur, maar installeert react en alle andere nodige pakketten nog niet, hiervoor moet je, zoals in de uitvoer in de terminal te zien is, nog 2 extra commando's uitvoeren.
cd projectNaam
pnpm install
Hoe gebruik ik de lesvoorbeelden en oplossingen?
Alle code in deze cursus wordt aangeboden zonder de node_modules map. Dit betekent dat react, react-dom, react-router, react-router-dom, ... niet geïnstalleerd zijn in een gedownload project. Om alle bibliotheken te installeren moet je in elk project dat je download, in de terminal, het onderstaande commando uitvoeren.
pnpm install
Hoe start ik een development server voor mijn react?
Om de development server te starten navigeer je naar de map waarin je project zich bevindt en voer je onderstaand commando uit.
pnpm run dev
Hoe maak ik een productie build van mijn React app?
Een productie build kan gegenereerd worden met het npm run build commando.
Hoe installeer ik een npm library?
Om een nieuwe library te installeren in een project gebruik je onderstaand commando, hier wordt libraryNaam natuurlijk vervangen met de naam van de library die je wil installeren.
pnpm add libraryNaam
Hoe los ik de foutboodschap "ERR_PNPM_NO_SCRIPT Missing script: dev" op?
Deze foutboodschap wordt getoond als je het commando uitvoerde in een map die geen React project bevat. Zie terminal basics voor meer informatie over hoe je kan navigeren in de terminal. Elk React commando moet uitgevoerd worden in de root directory van je project.
pnpm waarschuwt mij dat er kwetsbaarheden gevonden zijn. Moet ik me hier zorgen om maken?
Je mag deze waarschuwingen negeren, in een productieomgeving is dit natuurlijk geen goed idee, maar voor deze cursus ligt de focus op het ontwikkelen van een React applicatie. Dat er hier en daar een verouderde bibliotheek geïnstalleerd is, speelt zo'n rol niet.
Hoe installeer ik een specifieke versie van een npm library?
Om een specifieke versie van een bibliotheek te installeren zoek je op https://www.npmjs.com naar de gewenste versie. Stel je wil versie 17.0.2 van React gebruiken in de plaats van de laatste versie, dan kan je dit op volgende manier toevoegen aan je project:
pnpm add react@17.0.2
Hoe genereer ik een production build?
Om een production build te genereren voor een project gebruik je onderstaand commando. Dit commando produceert een map dist waarvan de inhoud rechtstreeks op webhosting geplaatst kan worden.
pnpm run build
Root URL
Het bovenstaande commando verwacht dat het React project op de root van de webhosting geplaatst wordt, maar dit is natuurlijk niet altijd het geval. Stel je hebt een portfolio waarop je meerdere projecten wil hosten en dat het React project in de map /reactProject zit.
/
|-- index.html
|-- project1
| |-- index.html
| |-- ...
|-- reactProject
| |-- index.html
| |-- assets
| |-- ...
In deze situatie moet het pad van het React project meegegeven worden aan het build commando, anders werkt de production build niet, dit doe je als volgt.
pnpm run build --base=/reactProject
Welk type moet ik gebruiken in een event handler?
De video's werken niet in mijn browser
Deze cursus maakt gebruik van de AV1 video codec omdat deze codec het mogelijk maakt om hoge kwaliteit video's te publiceren met een lage bitrate. Om de cursus offline te gebruiken als PWA moeten alle video's gedownload worden, dit kan gezien de grote hoeveelheid video's en cursusmateriaal lang duren, daarom is het belangrijk dat de video's niet te groot worden. Als de video's niet werken, kan je best overschakelen naar een browser die de AV1 codec ondersteund, een volledig overzicht van de browsers die dit formaat ondesteunen is beschikbaar op Can I use.