Development environment
Voor we kunnen beginnen met het bouwen van single page applicaties in React is het nodig om bepaalde software te installeren. Dit hoofdstuk beschrijft welke tools je nodig hebt en hoe deze geïnstaleerd kunnen worden.
Node.js
Node.js is een tool waarmee je JavaScript servers kan draaien en een JavaScript interpreter kan installeren op je machine. Daarnaast bevat Node ook npm. De Node package manager (of npm) kan gebruikt worden om verschillende soorten JavaScript apps te bootstrappen, om bibliotheken te installeren en een overzicht te houden van de packages die nodig zijn voor je JavaScript app, zowel voor development als voor de eindgebruiker.
Gebruikt bovenstaande link om Node.js te installeren, kies bij voorkeur voor de recentste versie. Als dit problemen zou geven kan je eventueel voor de LTS (Long term support) kiezen.
Kies tijdens de installatie zeker voor 'Automatically install the necessary tools. Note that this wil also install Chocolatey. The script will pop-up in a new window after the installation completes'. Deze optie is vereist voor Mobiele Applicaties, een ander opleidingsonderdeel in de graduaatsopleiding programmeren.
Node package manager
Npm vertoont problemen als je gebruikersnaam bestaat uit meerde woorden, i.e. als deze een spatie bevat. Controleer onder welke naam je gebruikersmap bewaard is ('C:\Users'). Zie je hier een map staan waarvan de naam een spatie bevat, dan moet je een symlink aanmaken om npm te kunnen gebruiken. Een symlink of symbolic link is een folder op je bestandssysteem die geen data bevat maar een link naar een andere locatie op je bestandssysteem. Als je userfolder 'c: \Users\Voornaam Achternaam' is dan moet een symlink gemaakt worden zodat 'c:\Users\Voornaam' verwijst naar 'c: \Users\Voornaam Achternaam'.
Start powershell.exe als Adminstrator (via het rechterklikt menu) en voer volgende commando's uit.
cd ~$newHome = (Get-Location).Path.Split(' ')[-1]cd ..New-Item -ItemType SymbolicLink -Path ~/../$newHome -Value ~
WebStorm
Tijdens de lessen wordt er gebruik gemaakt van de WebStrom IDE, dit is echter geen verplichting. Werk je liever met Visual Studio Code, dan mag dat. Let op, je moet dan wel zelf op zoek naar de juiste plug-ins.
Ga naar de JetBrains Education pagina en vraag een gratis licentie aan via je Thomas More email. Om Webstorm te installeren heb je twee opties, de eerste is om de JetBrains Toolbox te gebruiken. Dit is een applicatie waarmee alle JetBrains producten geïnstalleerd kunnen worden, verder geeft deze app je ook toegang tot beta-build van nieuwe versies en worden de geïnstalleerde tools automatisch geüpdatet. De andere optie is om WebStorm als stand-alone te installeren.
WebStorm terminal
Tijdens de lessen wordt de geïntegreerde PowerShell terminal van WebStorm gebruik. Standaard is WebStorm ingesteld om het klassieke cmd.exe te gebruiken als terminal. Windows gebruikers passen dit best aan zodat de commando's die in de les gebruikt worden zonder problemen op hun machines gebruikt kunnen worden. Voor macOS of *nix gebruikers moet er niets veranderen aangezien de hoeveelheid commando's beperkt blijft, en deze dezelfde naam hebben in bash en de macOS terminal.
- Open in WebStorm settings (File > Settings)
- Ga naar de terminal settings (Tools > Terminal)
- Stel 'Shell path' in op powershell.exe
- Druk op 'Apply'
Voorbeelden & oplossingen uitvoeren op jouw computer
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 het gedownloade project. Om alle bibliotheken te installeren moet je in elk project dat je download, in de terminal, het onderstaande commando uitvoeren.
npm install