In deze cursus (Full Stack Web Development) leer je een webapplicatie te bouwen met een reactive front-end en een RESTful back-end. De front-end en back-end zijn dus gescheiden applicaties. We maken gebruik van de MERN stack: React voor de dynamische front-end en Node.js, Express, en MongoDB voor de back-end en dataopslag.
Aan het einde van de cursus kun je zelfstandig een Full Stack webapplicatie opzetten, beveiligen en hosten op een server.
Oefenen reactive front-end
Oefenen RESTful back-end
Eindopdracht en verdieping
Zelfstandig afronden eindopdracht
Cursus | Kenmerken |
---|---|
FED | Geen logica op de backend en front-end |
PRG2 en PRG5 | Alle logica op de backend, geen logica op de front-end |
PRG3 en PRG6 | Data-logica op de backend, UI-logica op de front-end |
Tijdens deze cursus ligt de focus op:
- Reactive front-end (UI)
- RESTful back-end (Data)
- Communicatie (HTTP)
- Installatie op de server
Tools | Doel |
---|---|
PhpStorm | Voor ontwikkeling van zowel de front- als de backend |
node | JavaScript runtime op de backend. |
npm | Packetmanager voor zowel front- als backend, om modules te installeren. |
vite | Build-tool voor de front-end. |
ssh | Remote terminal verbinding met de Ubuntu server waar de back-end draait. |
FileZilla | FTP-client om bestanden over te zetten naar de back-end. |
- Onderdelen: Front-end, Back-end, Client, Server, Webserver, db/MongoDB
- Tools: PHPStorm, node, npm, vite, ssh, filezilla
- Modules: Express, Mongoose, React, Fetch, Tailwind
- Communicatie: HTTP
React (en reactive framworks in het algemeen) zijn event-driven. Componenten reageren op events en passen de interface aan. Hierdoor zorgen veranderingen in data voor automatische re-rendering, wat zorgt voor een reactieve gebruikerservaring.
Voor een React project heb je onderstaande tools nodig.
Node.js maakt het mogelijk om JavaScript buiten de browser te draaien. Voor nu is het alleen nodig om de package manager te gebruiken. Het draaien van volledige serverfunctionaliteit in JavaScript komt bij de back-end.
Node Package Manager (npm) is een beheertool voor JavaScript-pakketten. Hiermee kun je eenvoudig modules (node packages) installeren en verwijderen.
Onderdeel | Uitleg |
---|---|
package.json | Bevat projectinformatie en een lijst van benodigde dependencies en scripts |
run scripts | Hiermee kun je npm-commando's definiëren in package.json voor het draaien van opdrachten zoals npm start |
type=module | Is een instelling van je project waardoor je de ES6 import syntax kunt gebruiken in plaats van het oudere require |
Vite is een ontwikkeltool waarmee je de React-app met live updates (hot-reloading) kunt ontwikkelen en later kunt builden (of 'bundelen') voor productie.
Tailwind is een CSS-framework dat gebruik maakt van voorgedefinieerde CSS-classes om styling aan je app toe te voegen. Op deze manier kan je alle styling direct in het component toevoegen. Dit maakt de herbruikbaarheid van componenten nog makkelijker omdat het compleet is met logica en vormgeving.
En natuurlijk hebben we React zelf nodig om de gebruikersinterface te bouwen. :-)
Een react app is een single page web applicatie. Opgebouwd uit componenten. Er is data binding door middel van (state) variabelen. Dit betekent dat een verandering van een variabele zorgt voor automatische re-rendering van (delen van) de pagina. Dit is wat we bedoelen als we zeggen dat een applicatie reactive is.
Een component is een functie die als return-waarde HTML heeft. De naam van de functie is ook de naam van de tag waarmee
je het component aanroept. Dus function Product()
roep je in je code aan als <Product />
.
Probeer de functionaliteit zoveel mogelijk te isoleren. Dat betekent dat de logica en weergave binnen het component losstaan van de rest van de applicatie. Dit maakt de code overzichtelijk en daarnaast maakt het hergebruik van een component mogelijk.
Tijdens deze cursus wordt elk component in een apart bestand geplaatst. Ook dit maakt hergebruik in andere projecten eenvoudiger.
Omdat componenten bedoeld zijn om HTML terug te geven, wordt er geen gebruik gemaakt van gewoon JavaScript, maar van JSX. Dit is een mix van JavasScript en HTML. Je kunt gewoon JavaScript schrijven zoals je gewend bent, maar op plekken waar een string verwacht wordt kan je ook HTML schrijven zonder aanhalingstekens te gebruiken.
Er zijn wel een paar dingen waar je rekening mee moet houden:
-
Er mag maar één root element zijn. Om dit makkelijker te maken bestaat er een leeg element
<>
, dat je kunt gebruiken als je meerdere root elementen hebt. -
Tags moeten altijd afgesloten worden. Ook tags waarvan we dat nu niet gewend zijn zoals
<img>
. Het is het netst om dit soort elementen self-closing te maken:<img />
. -
Omdat JavaScript
class
enfor
al gebruikt, gebruik je in JSXclassName
enhtmlFor
voor deze attributen. -
Binnen de HTML kan je JavaScript gebruiken binnen accolades
{ javascript }
, het resultaat daarvan wordt gebruikt in de HTML.
Met de functie useState
maak je een state variabele en een bijbehorende setter aan. Als je deze setter gebruikt om
de state variabele aan te passen, triggert dit React om op alle plekken waar de variabele gebruikt wordt de app opnieuw
te renderen.
De setter kan je zowel met een vaste waarde aanroepen, als met een functie die de huidige waarde aanpast.
https://react.dev/reference/react/useState
https://react.dev/learn/state-a-components-memory
Lifting state up
Lifting state up wordt gebruikt om data te delen tussen meerdere componenten. Het beheer van de state-variabele wordt hierbij naar een oudercomponent verplaatst. Door de setter-functie van de state als prop door te geven aan child-components, kunnen ook deze de state aanpassen. Veranderingen in een child-component kunnen hierdoor ook een re-render triggeren.
https://react.dev/learn/sharing-state-between-components
function App() {
const [count, setCount] = useState(0);
setCount(10); // dit zet de waarde van count direct op 10
const handleButtonAddOne = () => setCount((currentCount) => currentCount + 1);
return (
<>
<header>
<a href="" target="_blank">
<img src="logo.png" className="logo" alt="Logo"/>
</a>
</header>
<h1>Hello World</h1>
<main className="card">
<label htmlFor="name">Name</label>
<input id="name" name="name"/>
<button onClick={handleButtonAddOne}>
count is {count}
</button>
</main>
</>
)
}
Met props (properties) kan je waarden doorgeven aan een component. Dit maakt componenten dynamisch doordat er gegevens van een parent component naar een child component gestuurd kunnen worden. De props geef je door als attributen van het component in de HTML en gebruik je in het component als parameters van de functie.
function Item({product}) {
return (
<li>
{product.title}
</li>
);
}
function List({items}) {
const list = items.map(product =>
<Item key={product.id} product={product}/>
);
return (
<ul>
{list}
</ul>
);
}
function App() {
// load products
return (
<>
<List items={products}/>
</>
)
}
- Installeer node (als je dat nog niet gedaan hebt)
- Maak een eerste React project aan met Vite en Tailwind
- Doorloop hiervoor de installatie van les 1
- Maak een array aan in je project met objecten.
- Gebruik map om de titels uit de array in App.jsx te tonen in een
<ul>
met<li>
- Verplaats de
<li>
naar een apart component die eenprop
genaamditem
verwacht waarin je het object doorstuurt - Pas het component aan door het volledige object in een
<article>
te tonen, dat je stylt met Tailwind
Voeg een component toe dat je plaatst onder de articles. In dit component staat alleen een button, die als je erop klikt een random article aan de lijst toevoegt.