Summary

Samenvatting Frontend Frameworks - React

0 purchase

Course

Institution
Thomas More Hogeschool (tmhs)

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

[Show more]

Preview 4 out of 81 pages

View example

Uploaded on October 31, 2023
Number of pages 81
Written in 2023/2024
Type Summary

frontend
framework
frontend frameworks
react
typescript
tanstack query
state
componenten
programmeren
programmeertaal
single pages applications
application
ui

Institution
Thomas More Hogeschool (tmhs)
Education
Graduaat Programmeren
Course Unknown

anouckcelis

Member since 2 year 10 documents sold

$8.60

Add to cart

Add to wishlist

100% satisfaction guarantee
Immediately available after payment
Both online and in PDF
No strings attached

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

The benefits of buying summaries with Stuvia:

Guaranteed quality through customer reviews

Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.

Quick and easy check-out

You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.

Focus on what matters

Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!

Frequently asked questions

What do I get when I buy this document?

You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.

Satisfaction guarantee: how does it work?

Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.

Who am I buying these notes from?

Stuvia is a marketplace, so you are not buying this document from us, but from seller anouckcelis. Stuvia facilitates payment to the seller.

Will I be stuck with a subscription?

No, you only buy these notes for $8.60. You're not tied to anything after your purchase.

Can Stuvia be trusted?

4.6 stars on Google & Trustpilot (+1000 reviews)

69411 documents were sold in the last 30 days

Founded in 2010, the go-to place to buy study notes for 15 years now

Start selling

Summary

Samenvatting Frontend Frameworks - React

Document information

Subjects

Written for

Seller

Reviews received

Content preview