100% tevredenheidsgarantie Direct beschikbaar na je betaling Lees online óf als PDF Geen vaste maandelijkse kosten
logo-home
Eerder door jou gezocht
Eerder door jou gezocht
logo
Samenvatting Frontend Frameworks - React €7,99
In winkelwagen
Snel navigeren naar
Voorbeeld
  2.  
  3. Thomas More Hogeschool (tmhs)
  4.  
  5. Graduaat Programmeren

Samenvatting

Samenvatting Frontend Frameworks - React
 0 keer verkocht
  • Vak

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

[Meer zien]

Voorbeeld 4 van de 81  pagina's

Document informatie

  • 31 oktober 2023
  • 81
  • 2023/2024
  • Samenvatting

Onderwerpen

Geschreven voor

Verkoper

avatar-seller
anouckcelis

Ontvangen beoordelingen

Voorbeeld van de inhoud

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

Dit zijn jouw voordelen als je samenvattingen koopt bij Stuvia:

Bewezen kwaliteit door reviews

Bewezen kwaliteit door reviews

Studenten hebben al meer dan 850.000 samenvattingen beoordeeld. Zo weet jij zeker dat je de beste keuze maakt!

In een paar klikken geregeld

In een paar klikken geregeld

Geen gedoe — betaal gewoon eenmalig met iDeal, Bancontact of creditcard en je bent klaar. Geen abonnement nodig.

Focus op de essentie

Focus op de essentie

Studenten maken samenvattingen voor studenten. Dat betekent: actuele inhoud waar jij écht wat aan hebt. Geen overbodige details!

Veelgestelde vragen

Wat krijg ik als ik dit document koop?

Je krijgt een PDF, die direct beschikbaar is na je aankoop. Het gekochte document is altijd, overal en oneindig toegankelijk via je profiel.

Tevredenheidsgarantie: hoe werkt dat?

Onze tevredenheidsgarantie zorgt ervoor dat je altijd een studiedocument vindt dat goed bij je past. Je vult een formulier in en onze klantenservice regelt de rest.

Van wie koop ik deze samenvatting?

Stuvia is een marktplaats, je koop dit document dus niet van ons, maar van verkoper anouckcelis. Stuvia faciliteert de betaling aan de verkoper.

Zit ik meteen vast aan een abonnement?

Nee, je koopt alleen deze samenvatting voor €7,99. Je zit daarna nergens aan vast.

Is Stuvia te vertrouwen?

4,6 sterren op Google & Trustpilot (+1000 reviews)

Afgelopen 30 dagen zijn er 69411 samenvattingen verkocht

Opgericht in 2010, al 15 jaar dé plek om samenvattingen te kopen

Start met verkopen
€7,99
  • (0)
In winkelwagen
Toegevoegd