In deze samenvatting worden de belangrijkste concepten uit de React bibliotheek besproken. Je leert een Single Page Application te bouwen waarin de cruciale concepten zoals state en componenten verwerkt zitten.
De leerstof begint met het opdelen van een UI in herbruikbare componenten. We bespreke...
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
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 avantages d'acheter des résumés chez Stuvia:
Qualité garantie par les avis des clients
Les clients de Stuvia ont évalués plus de 700 000 résumés. C'est comme ça que vous savez que vous achetez les meilleurs documents.
L’achat facile et rapide
Vous pouvez payer rapidement avec iDeal, carte de crédit ou Stuvia-crédit pour les résumés. Il n'y a pas d'adhésion nécessaire.
Focus sur l’essentiel
Vos camarades écrivent eux-mêmes les notes d’étude, c’est pourquoi les documents sont toujours fiables et à jour. Cela garantit que vous arrivez rapidement au coeur du matériel.
Foire aux questions
Qu'est-ce que j'obtiens en achetant ce document ?
Vous obtenez un PDF, disponible immédiatement après votre achat. Le document acheté est accessible à tout moment, n'importe où et indéfiniment via votre profil.
Garantie de remboursement : comment ça marche ?
Notre garantie de satisfaction garantit que vous trouverez toujours un document d'étude qui vous convient. Vous remplissez un formulaire et notre équipe du service client s'occupe du reste.
Auprès de qui est-ce que j'achète ce résumé ?
Stuvia est une place de marché. Alors, vous n'achetez donc pas ce document chez nous, mais auprès du vendeur anouckcelis. Stuvia facilite les paiements au vendeur.
Est-ce que j'aurai un abonnement?
Non, vous n'achetez ce résumé que pour €7,99. Vous n'êtes lié à rien après votre achat.
