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ïnstalleerd 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.

Gebruik bovenstaande link om Node.js te installeren, kies bij voorkeur voor de LTS versie (Long term support). Als dit problemen zou geven kan je eventueel voor de recentste versie 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.

Figuur 1: Node.js Installatie

Node package manager & pnpm

Npm is een volwaardige package manager waarmee alle nodige pakketten geïnstalleerd kunnen worden, toch kiezen we voor het alternatief pnpm. Deze package manager is tot 2x sneller dan npm en download een pakket slechts één keer terwijl npm een installatie voor elk project (voorbeeld/oefening) vereist. Installeer pnpm door het volgende commando uit te voeren in een shell (cmd, powershell, bash, ...).

npm install -g pnpm

Om zo min mogelijk commando's uit te voeren is het nodig om een configuratiefile toe te voegen voor pnpm. Download .npmrc, unzip en plaats het bestand vervolgens in je homefolder, de locatie van deze folder is natuurlijk afhankelijk van je besturingssysteem:

• Windows: "C:\Users\JOUW GEBRUIKERSNAAM HIER"
• Linux: "/home/JOUW GEBRUIKERSNAAM HIER"
• macOS: "/Users/JOUW GEBRUIKERSNAAM HIER"

Windows machines

Om alle commando's vlot te gebruiken op een Windows machine moet je eerst configureren dat scripts uitgevoerd mogen worden. Hiervoor start je PowerShell als Administrator en voer je vervolgens het commando uit.

Set-ExecutionPolicy RemoteSigned

pnpm setup

Herstart vervolgens je PowerShell terminal en voer het onderstaande commando uit. Herstart de terminal daarna nog een laatste keer.

pnpm setup

Problemen met het uitvoeren van pnpm commando's?

Npm en pnpm vertonen problemen als je gebruikersnaam bestaat uit meerdere woorden, i.e. als deze een spatie bevat. Controleer onder welke naam je gebruikersmap bewaard is ('C:\Users\JOUW GEBRUIKERSNAAM'). 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 rechterklik 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 WebStorm IDE, dit is echter geen verplichting. Werk je liever met Visual Studio Code (of een andere IDE), 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 gebruikt. Standaard is WebStorm ingesteld om het klassieke cmd.exe te gebruiken. 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'

JSX File template

Standaard bevat WebStorm in het "New File" menu geen optie om een JSX file aan te maken (het type dat wij gebruiken). Het is echter heel eenvoudig om dit te configureren. Ofwel vertrek je van het startscherm, ofwel vanuit een geopend project.

Figuur 2: Settings openen vanuit het startscherm

Figuur 3: Settings openen vanuit een geopend project

Navigeer vervolgens naar Settings > Editor > File and Code Templates en voeg hier een nieuwe template toe. Plak onderstaande code in je template.

#set($COMPONENT_NAME = $NAME.substring(0,1).toUpperCase() + $NAME.substring(1))
import {FunctionComponent} from 'react'

const ${COMPONENT_NAME}: FunctionComponent = () => {
    return (
        <>
        </>
    )
}

export default ${COMPONENT_NAME}

Figuur 4: Nieuwe file template toevoegen

Nu zou de optie beschikbaar moeten zijn om een nieuwe React component aan te maken via het "New File" menu.

Figuur 5: Nieuwe file template gebruiken

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.

pnpm install