Frontend Frameworks
Les 1 - Componenten
Project aanmaken
o Een nieuw project wordt aangemaakt met een commando
pnpm create vite projectNaam –template react swc-ts
Hierin wordt de projectNaam logischerwijs vervangen
Dit commando produceert een nieuwe map projectNaam die
het niewe React project bevat
o Deze map wordt aangemaakt als submap van de
locatie waar het commando wordt uitgevoerd
Bovenstaand commando genereert enkel de mappen
structuur, maar installeert React en alle andere nodige
pakketten nog niet
o 2 extra commando’s
cd projectNaam
pnpm install
Mappenstructuur
o Relatief eenvoudig
node_modules library root
Bevat alle bibliotheken en tools die nodig zijn om een React
applicatie te ontwikkelen en te publiceren
Daarnaast komen ook alle extra pakketten die je als
ontwikkelaar installeert in deze map te staan
Omdat we pnpm gebruiken bevat deze map enkel symbolic
links naar een algemene library cache op jou machine
o Deze map is dus overbodig als je code uploadt, in een
git repository plaatst, enz
Voeg deze map dus altijd toe aan je .gitignore
file
Deze kan eenvoudig gereproduceerd worden met
onderstaand commando
o pnpm install
, public
Bevat statische resources die niet mee gecompliceerd,
gebundeld of minified moeten worden
Bevat standaard enkel het Vite logo
Normaal niet veel extra toevoegen aan deze map, behalve
een favicon en eventuele statische bestanden
src
Bevat de eigenlijke code van de React applicatie
Standaard bevat deze map een hele reeks bestanden
Elke keer beginnen bij de start van een nieuw project,
beginnen met een leeg project
o Inhoud van de src map weggooien als je een nieuw
project aanmaakt
.gitignore
Elk React project wordt standaard geïnitialiseerd als een git
project
Het .gitignore bestand bevat een opsomming van de
bestanden die niet in version control geplaatst mogen
wprden
o node_modules
o dist
package.json
Hierin worden alle geïstalleerde pakketten opgesomd
Hiervoor worden 2 attributen gebruikt binnen het JSON-object
o Eerste attribuut
Dependencies
Bevat een lijst van alle geïnstalleerde
pakketten die relevant zijn voor de
eindgebruiker
o Tweede attribuut
devDependencies
Bevat een lijst van alle geïnstalleerde
pakketten doe enkel relevant zijn tijdens
de ontwikkeling van de applicatie
Tijdens het compilatieproces worden enkel de dependencies
gekopieerd naar de productie-build, de devDependencies
wordt gebruikt om de productie-build genereren
Index.html
2
, De enige pute HTML-file die gebruikt wordt in een React
project
Binnen deze HTML-pagina mag enkel de inhoud van het
<head>-tag aangepast worden
Het <div>-element vormt de root van onze pagina
o React zal de volledige pagina in laden via JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Renderen
o Index.html bestaat uit zeer weinig code
De body bevat slechts uit een div met een ID root
Dit element vormt de kern van de applicatie, alle
componenten zullen hierin geplaatst worden door React
o Bestand dat als ingangspunt dient voor de applicatie van een React
website
Dit bestand krijgt de naam main.tsx en wordt in de src map
geplaatst
In dit bestand leggen we de link met /index.html
o Het <div>-element kan eenvoudig opgehaald worden
via de standaard JavaScript methode
document.getElementById
Omdat we met TypeScript werken, moeten we
een cast toevoegen waarmee we aangeven dat
het root element gegarandeerd wordt
o Om een React component te tonen moet de React
method render gebruikt worden
De render-methode heeft één parameter, de
JSX-code die gerenderd moet worden
Om deze code uit te testen moet de development server gestart
worden
pnpm run dev
3
, o Nadat je dit commando uitgevoerd hebt, zie je in de
terminal een opsomming van de IP-adressen waarop
de development server beschikbaar is. Kopieer dit naar
je browser of click op het adres om automatisch naar
//de browservan
Importeren tereact-dom,
gaan. de bibliotheek die het renderen mogelijk
maakt.
import ReactDOM from 'react-dom/client'
// Aanmaken van de root voor de React applicatie.
JSX const root = ReactDOM.createRoot(
o JavaScript XML document.getElementById('root') as HTMLElement
Laat toe om )HTML-code in JavaScript te gebruiken zonder quotes of
concatenaties
root.render(
Het is onmogelijk voor een
<h1>Hello browser om z’n code te lezen en uit te
World!</h1>
voeren
Daarom moet elke lijn JSX-code gecompileerd worden naar
klassieke JavaScript code
o Als we TypeScript en KSX combineren, gebruiken we
de tsx extensie
o React heeft ervoor gekozen om JavaScript en HTML te combineren
Een component combineert markup en JavaScript in één klein stukje
code dat één bepaald UI-element implementeert
JSX is een uitbreiding voor JavaScript en TypeScript
Syntax regels
o TSX uitbreiding op Typescript
MAAR enkele belangrijke syntax regels waarmee rekening
gehouden moet worden
HTML-code kan niet zomaar aan een variabele toegekend
worden aan een variabele toegekend worden in TSX
Perfecte uitlijnde code
o Volledige code omringen met rond haken
Typescript expressies
Deze omringen door accolades
Soms heb je een container nodig waaraan geen opmaak gebonden
is
Een div begint standaard een nieuwe lijn omdat het een
block-element is Fragment gebruiken
Een fragment is een container element dat enkel
in de React code bestaat en geen effect heeft op
4
Les 1 - Componenten
Project aanmaken
o Een nieuw project wordt aangemaakt met een commando
pnpm create vite projectNaam –template react swc-ts
Hierin wordt de projectNaam logischerwijs vervangen
Dit commando produceert een nieuwe map projectNaam die
het niewe React project bevat
o Deze map wordt aangemaakt als submap van de
locatie waar het commando wordt uitgevoerd
Bovenstaand commando genereert enkel de mappen
structuur, maar installeert React en alle andere nodige
pakketten nog niet
o 2 extra commando’s
cd projectNaam
pnpm install
Mappenstructuur
o Relatief eenvoudig
node_modules library root
Bevat alle bibliotheken en tools die nodig zijn om een React
applicatie te ontwikkelen en te publiceren
Daarnaast komen ook alle extra pakketten die je als
ontwikkelaar installeert in deze map te staan
Omdat we pnpm gebruiken bevat deze map enkel symbolic
links naar een algemene library cache op jou machine
o Deze map is dus overbodig als je code uploadt, in een
git repository plaatst, enz
Voeg deze map dus altijd toe aan je .gitignore
file
Deze kan eenvoudig gereproduceerd worden met
onderstaand commando
o pnpm install
, public
Bevat statische resources die niet mee gecompliceerd,
gebundeld of minified moeten worden
Bevat standaard enkel het Vite logo
Normaal niet veel extra toevoegen aan deze map, behalve
een favicon en eventuele statische bestanden
src
Bevat de eigenlijke code van de React applicatie
Standaard bevat deze map een hele reeks bestanden
Elke keer beginnen bij de start van een nieuw project,
beginnen met een leeg project
o Inhoud van de src map weggooien als je een nieuw
project aanmaakt
.gitignore
Elk React project wordt standaard geïnitialiseerd als een git
project
Het .gitignore bestand bevat een opsomming van de
bestanden die niet in version control geplaatst mogen
wprden
o node_modules
o dist
package.json
Hierin worden alle geïstalleerde pakketten opgesomd
Hiervoor worden 2 attributen gebruikt binnen het JSON-object
o Eerste attribuut
Dependencies
Bevat een lijst van alle geïnstalleerde
pakketten die relevant zijn voor de
eindgebruiker
o Tweede attribuut
devDependencies
Bevat een lijst van alle geïnstalleerde
pakketten doe enkel relevant zijn tijdens
de ontwikkeling van de applicatie
Tijdens het compilatieproces worden enkel de dependencies
gekopieerd naar de productie-build, de devDependencies
wordt gebruikt om de productie-build genereren
Index.html
2
, De enige pute HTML-file die gebruikt wordt in een React
project
Binnen deze HTML-pagina mag enkel de inhoud van het
<head>-tag aangepast worden
Het <div>-element vormt de root van onze pagina
o React zal de volledige pagina in laden via JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Renderen
o Index.html bestaat uit zeer weinig code
De body bevat slechts uit een div met een ID root
Dit element vormt de kern van de applicatie, alle
componenten zullen hierin geplaatst worden door React
o Bestand dat als ingangspunt dient voor de applicatie van een React
website
Dit bestand krijgt de naam main.tsx en wordt in de src map
geplaatst
In dit bestand leggen we de link met /index.html
o Het <div>-element kan eenvoudig opgehaald worden
via de standaard JavaScript methode
document.getElementById
Omdat we met TypeScript werken, moeten we
een cast toevoegen waarmee we aangeven dat
het root element gegarandeerd wordt
o Om een React component te tonen moet de React
method render gebruikt worden
De render-methode heeft één parameter, de
JSX-code die gerenderd moet worden
Om deze code uit te testen moet de development server gestart
worden
pnpm run dev
3
, o Nadat je dit commando uitgevoerd hebt, zie je in de
terminal een opsomming van de IP-adressen waarop
de development server beschikbaar is. Kopieer dit naar
je browser of click op het adres om automatisch naar
//de browservan
Importeren tereact-dom,
gaan. de bibliotheek die het renderen mogelijk
maakt.
import ReactDOM from 'react-dom/client'
// Aanmaken van de root voor de React applicatie.
JSX const root = ReactDOM.createRoot(
o JavaScript XML document.getElementById('root') as HTMLElement
Laat toe om )HTML-code in JavaScript te gebruiken zonder quotes of
concatenaties
root.render(
Het is onmogelijk voor een
<h1>Hello browser om z’n code te lezen en uit te
World!</h1>
voeren
Daarom moet elke lijn JSX-code gecompileerd worden naar
klassieke JavaScript code
o Als we TypeScript en KSX combineren, gebruiken we
de tsx extensie
o React heeft ervoor gekozen om JavaScript en HTML te combineren
Een component combineert markup en JavaScript in één klein stukje
code dat één bepaald UI-element implementeert
JSX is een uitbreiding voor JavaScript en TypeScript
Syntax regels
o TSX uitbreiding op Typescript
MAAR enkele belangrijke syntax regels waarmee rekening
gehouden moet worden
HTML-code kan niet zomaar aan een variabele toegekend
worden aan een variabele toegekend worden in TSX
Perfecte uitlijnde code
o Volledige code omringen met rond haken
Typescript expressies
Deze omringen door accolades
Soms heb je een container nodig waaraan geen opmaak gebonden
is
Een div begint standaard een nieuwe lijn omdat het een
block-element is Fragment gebruiken
Een fragment is een container element dat enkel
in de React code bestaat en geen effect heeft op
4
