Les 1: Componenten
Les 1: Componenten
Deze les bekijken we hoe een React app aangemaakt kan worden, hoe de mappenstructuur van een React app in elkaar zit en hoe we eenvoudige componenten kunnen bouwen en gebruiken.
Project aanmaken
Een nieuw React project wordt aangemaakt via het commando
pnpm create vite projectNaam --template react
waar projectNaam logischerwijs vervangen wordt met de naam van het nieuwe project. Dit commando produceert een nieuwe map projectNaam die het nieuwe React project bevat. Deze map wordt aangemaakt als submap van de locatie waar het commando uitgevoerd wordt. Als de terminal zich, bijvoorbeeld, bevindt in C:\projects, dan zal het commando pnpm create vite projectNaam --template react een nieuwe map C:\projects\voorbeeld-project aanmaken.
Bovenstaand commando genereert enkel de mappenstructuur maar installeert react en alle andere nodige pakketten nog niet, hiervoor moet je, zoals in de uitvoer in de terminal te zien is, nog 2 extra commando's uitvoeren.
cd projectNaam
pnpm install
Mappenstructuur
De mappenstructuur van een React project is relatief eenvoudig. Hieronder bespreken we elke map en elk bestand.
node_modules
De node_modules map bevat alle bibliotheken en tools die nodig zijn om een React applicatie te ontwikkelen en builden. Daarnaast komen ook alle extra pakketten die jij, als ontwikkelaar, installeert in deze map te staan. Omdat we pnpm gebruiken bevat deze map slechts symbolic links. Dit betekent dus dat deze map overbodig is als je code uploadt op Canvas, doorstuurt om antwoord te krijgen op een vraag, in een git repository plaatst, ... Iedereen die de package.json file heeft, kan de node_modules dupliceren. Verwijder deze map dus altijd voordat je code deelt (of voeg de map toe aan een .gitignore file).
public
De map public bevat statische resources die niet mee gecompileerd, gebundeld en minified moeten worden. Deze map bevat standaard enkel het Vite logo. Normaliter moet er niet veel toegevoegd worden aan deze folder, behalve een favicon en eventuele binaire bestanden (bijvoorbeeld een CV op een portfolio). Alle code, stylesheets en images komen in de src map te staan.
src
Deze map bevat de eigenlijke code van de React applicatie, standaard bevat deze map een hele reeks bestanden. We vertrekken elke les van een leeg project, de inhoud van de src map mag je dus weggooien als je een nieuw project aanmaakt.
.gitignore
Elk React project wordt standaard geïnitialiseerd als een git project. De .gitignore file bevat een opsomming van de bestanden die niet in version control geplaatst mogen worden, bijvoorbeeld de map node_modules.
package.json
Binnen package.json worden alle geïnstalleerde pakketten opgesomd. Hiervoor worden 2 attributen gebruikt binnen het JSON-object. Het eerste attribuut dependencies bevat een lijst van alle geïnstalleerde pakketten die relevant zijn voor de eindgebruiker. Het tweede attribuut devDependencies bevat een lijst van alle geïnstalleerde pakketten die enkel relevant zijn tijdens de ontwikkeling van de applicatie. Zaken zoals linters, transpilers, build-tools, en testing libraries, horen hier thuis. Tijdens het compilatieproces worden enkel de dependencies gekopieerd naar de productie-build. De devDependencies worden hierbij genegeerd.
Hint
Voeg de node_modules map niet toe aan je git repository. Dit zal niet werken als je de code kloont op een andere machine, deze map is bovendien eenvoudig te reproduceren door middel van package.json. Dit kan met het commando
pnpm install
index.html
Dit is de enige pure HTML-file die we gebruiken in een React project. Binnen deze HTML-pagina mag enkel de inhoud van het <head> tag aangepast worden, bijvoorbeeld om het favicon te wijzigen, aan SEO te doen of iets van een CDN in te laden. De body van deze pagina wordt door React ingevuld. Deze HTML-pagina bevat volgende code:
<!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.jsx"></script>
</body>
</html>
Het gemarkeerde <div> element vormt de root van onze pagina, React zal hier de volledige pagina in laden via JavaScript.
Renderen
Zoals eerder gezegd, bestaat de index.html pagina uit zeer weinig code. De body bevat slechts een div met het id root. Dit element vormt de kern van de applicatie, alle componenten zullen hierin geplaatst worden door React.
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
Net zoals er voor een statische website steeds een index.html nodig is, moeten we voor een React website ook steeds een bestand toevoegen dat als ingangspunt dient voor de applicatie. Dit bestand krijgt de naam main.jsx en wordt natuurlijk in de src map geplaatst.
In dit bestand leggen we de link met /index.html. Het div element kan eenvoudig opgehaald worden via de standaard JavaScript methode document.getElementById. We gebruiken dit element vervolgens om de root (de plaats waarin de volledige website door React gerenderd zal worden) van onze React applicatie te initialiseren. Let op het import statement.
import ReactDOM from 'react-dom/client'
const root = ReactDOM.createRoot(
document.getElementById('root')
);
Om vervolgens 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.
// Importeren van "react-dom", de bibliotheek die het renderen mogelijk maakt.
import ReactDOM from 'react-dom/client'
// Aanmaken van de root voor de React applicatie.
const root = ReactDOM.createRoot(
document.getElementById("root")
)
root.render(
<h1>Hello World!</h1>
)
Bovenstaande code produceert een pagina waarop de tekst "Hello World!" getoond wordt, via de CodeSandbox link kan de code en het resultaat bekeken worden.
Om deze code uit te testen moet de development server gestart worden, dit kan met het commando:
pnpm run dev
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 browser te gaan.
JSX
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.
Klassieke JavaScript biedt geen bijzonder goede ondersteuning voor het schrijven van HTML-code, hiervoor zijn meestal een hele hoop string concatenaties nodig. Dit heeft trage en moeilijk te lezen code als gevolg, JSX is een uitbreiding voor JavaScript die hier een oplossing voor biedt.
Begrip: JSX
JavaScript XML (JSX), laat toe om HTML-code in JavaScript te gebruiken zonder quotes of concatenaties. Het is natuurlijk onmogelijk voor een browser om zo'n code te lezen en uit te voeren. Daarom moet elke lijn JSX code gecompileerd worden naar klassiek JavaScript code.
const element = <h1>Hello, world!</h1>;
wordt via Babel gecompileerd naar
const element = React.createElement("h1", null, "Hello, world!");
Syntax regels
JSX is een geweldige uitbreiding op JavaScript, maar er zijn enkele belangrijke syntax regels waarmee rekening gehouden moet worden.
De geldige HTML-code
<h1>Hello World!</h1>
<h1>Hello Universe!</h1>
kan niet zomaar aan een variabele toegekend worden in JSX.
const element = <h1>Hello World!</h1>
<h1>Hello Universe!</h1>;
De voorgaande code produceert volgende foutmelding.
Adjacent JSX elements must be wrapped in an enclosing tag.
Dit is een gevolg van het integreren van HTML in JavaScript (en de bijhorende syntax regels). Zoals de foutmelding zegt, moeten 2 opeenvolgende JSX-elementen binnen een ander element geplaatst worden. In welk element de HTML-code geplaatst wordt speelt geen rol, dit kan een <div>, <span>, ... zijn.
const element = <div>
<h1>Hello World!</h1>
<h1>Hello Universe!</h1>
</div>;
Bovenstaande code werkt en genereert geen foutmeldingen meer, maar misschien werk je liever met perfect uitgelijnde code? In dat geval omring je de volledige code met ronde haken.
const element = (
<div>
<h1>Hello World!</h1>
<h1>Hello Universe!</h1>
</div>
);
Bovenstaande voorbeelden zijn relatief beperkt, we maken eigenlijk geen gebruik van JavaScript, alles wat er gebeurt zou perfect met klassieke HTML kunnen. JSX wordt pas echt interessant als we JavaScript code integreren in HTML-code. We kunnen JavaScript code gebruiken door deze te omringen met accolades. Boven- en onderstaande code produceren net hetzelfde resultaat, maar de onderstaande code is dynamischer, de tekst "World" en "Universe" komen nu uit een JavaScript object.
Merk op dat alle geldige JavaScript code gebruikt kan worden tussen de accolades, in de eerste titel maken we gebruik van string concatenatie. De code tussen de accolades kan eveneens een functie zijn die een string teruggeeft.
const greeting = {
greeting1: "World",
greeting2: "Universe"
}
const element = (
<div>
<h1>Hello {greeting.greeting1 + "!"}</h1>
<h1>Hello {greeting.greeting2}!</h1>
</div>
)
root.render(
element
)
Bovenstaande code werkt en rendered de gevraagde hoofdingen, maar we hebben een omringende div moeten toevoegen, hier is niets mis mee. Als je echter een container nodig hebt waaraan geen opmaak gebonden is (een div begint standaard een nieuwe lijn, het is een block element), dan kan je een fragment gebruiken.
Begrip: Fragment
Een fragment is een container element dat enkel in de React code bestaat en geen effect heeft op de uiteindelijke HTML-code in het afgewerkte product. Een fragment wordt niet gerenderd.
const element = (
<div>
<h1>Hello {greeting.greeting1 + "!"}</h1>
<h1>Hello {greeting.greeting2}!</h1>
</div>
)
const element = (
<>
<h1>Hello {greeting.greeting1 + "!"}</h1>
<h1>Hello {greeting.greeting2}!</h1>
</>
)
Componenten
React applicaties delen de UI op in kleine stukken of componenten. Dit gebeurt van bovenaf naar onderaan. De bovenste component stelt een pagina voor, deze pagina bevat kleinere componenten die bijvoorbeeld een navigatiebalk, side-menu en content component bevatten. De navigatiebalk is op zijn beurt ingedeeld in een titel, navigatie en login-form component. Deze componenten kunnen op hun beurt weer ingedeeld worden in nog kleinere componenten.
Het doel van componenten is een herbruikbare, onderhoudbare UI. Elke component staat op zich en kan in de rest van de website, of op een andere website, herbruikt worden. Een component is opgebouwd uit verschillende JSX-elementen.
Begrip: Component
Een component is een onderdeel van een React applicatie, één applicatie bestaat uit tientallen componenten. Een component staat op zich, kan herbruikt worden en gebruikt eventueel andere componenten.
Bron: https://beta.reactjs.org/learn/thinking-in-react
Componenten definiëren
Om een component te definiëren, gebruiken we een JavaScript functie. De enige vereisten voor deze functie zijn dat:
- De functie een JSX-expressie teruggeeft
- De functie een naam heeft die begint met een hoofdletter
Het "Hello World/Universe" voorbeeld kan eenvoudig als een component geschreven worden, dit betekent dat ook de render methode aangepast moet worden zodat de nieuwe component gebruikt wordt. Een component kan in een JSX-expressie opgeroepen worden alsof het een HTML-element was.
const HelloWorld = () => {
const greeting = {
greeting1: "World",
greeting2: "Universe"
}
return (
<>
<h1>Hello {greeting.greeting1 + "!"}</h1>
<h1>Hello {greeting.greeting2}!</h1>
</>
)
}
root.render(
<HelloWorld/>
)
Tenslotte importeren we ook een door React aangereikte component, <StrictMode>. Deze component kan gebruikt worden om extra controles op fouten uit te voeren tijdens het ontwikkelproces. In een production build heeft deze component geen effect, verder toont deze component ook geen zichtbare UI, net zoals een fragment.
import {StrictMode} from 'react'
// Niet relevante code weggelaten.
root.render(
<StrictMode>
<HelloWorld/>
</StrictMode>
)
Begrip: Functie component
Een functie component is een functie die één herbruikbaar onderdeel van de user interface definieert en JSX-code teruggeeft. De naam van zo'n functie begint steeds met een hoofdletter. Een functie component kan ergens anders in de code gebruikt worden als een HTML-element.
const FunctionComponent = () => {
return (
<p>
Dis is een functie component,
de return waarde moet JSX-code zijn.
</p>
)
}
const exampleUsage = <FunctionComponent/>;
Importeren en exporteren
We kunnen natuurlijk niet alle componenten in één .jsx bestand plaatsten, dit zorgt snel voor onnodig grote bestanden en slecht onderhoudbare code. We zonderen componenten daarom af in individuele bestanden.
We kunnen vervolgens de component exporteren uit dit bestand en daarna terug importeren in een ander bestand.
const HelloWorld = () => {
const greeting = {
greeting1: "World",
greeting2: "Universe"
}
return (
<>
<h1>Hello {greeting.greeting1 + "!"}</h1>
<h1>Hello {greeting.greeting2}!</h1>
</>
)
}
export default HelloWorld;
import HelloWorld from './helloWorld.jsx';
// Niet relevante code weggelaten.
root.render(
<StrictMode>
<HelloWorld/>
</StrictMode>
)
export vs. export default
In deze cursus gebruiken we voor componenten steeds een default export, dit wil zeggen dat de componenten geïmporteerd kunnen worden zonder accolades te moeten schrijven.
Als we in bovenstaand voorbeeld de default modifier weglaten, wordt de component HelloWorld nog steeds geëxporteerd, maar maakt deze deel uit van een JavaScript object.
Om deze component te gebruiken moeten we dan accolades toevoegen aan het import statement om aan te geven dat we één element uit een object importeren.
Een bestand kan maximaal één default export hebben maar kan meerdere niet default exports hebben.
const HelloWorld = () => {
const greeting = {
greeting1: "World",
greeting2: "Universe"
}
return (
<>
<h1>Hello {greeting.greeting1 + "!"}</h1>
<h1>Hello {greeting.greeting2}!</h1>
</>
)
}
export HelloWorld;
import {HelloWorld} from './helloWorld.jsx';
Properties
Stel we willen een lijst van enkele belangrijke grondleggers van de computerwetenschappen renderen. De eenvoudigste optie is natuurlijk via een component waar al deze personen uitdrukkelijk uitgeschreven worden.
const ComputerScientistListV1 = () => {
return <div>
<h1>Famous computer scientists</h1>
<ul>
<li>
Charles Babbage (1791 - 1871): Originated the concept of a programmable general-purpose computer.
Designed the Analytical Engine and built a prototype for a less powerful mechanical calculator.
</li>
<li>
Ada Lovelace (1815 - 1852): An English mathematician and writer, chiefly known for her work on Charles
Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to
recognize that the machine had applications beyond pure calculation, and created the first algorithm
intended to be carried out by such a machine. As a result, she is often regarded as the first to
recognize the full potential of a "computing machine" and the first computer programmer.
</li>
<li>
Alan Turing (1912 - 1954): Made several fundamental contributions to theoretical computer science,
including the Turing machine computational model, the conceiving of the stored program concept and the
designing of the high-speed ACE design. Independently of Alonzo Church, he formulated the Church-Turing
thesis and proved that first-order logic is undecidable. He also explored the philosophical issues
concerning artificial intelligence, proposing what is now known as Turing test.
</li>
</ul>
</div>;
}
export default ComputerScientistListV1;
Dit is echter helemaal niet efficient, elk element in de lijst heeft dezelfde structuur, zodra iets meerdere keren voorkomt in de applicatie is het best hier een aparte component van te maken.
We kunnen eenvoudig 3 componenten maken, één voor elk van 3 computerwetenschappers, dit is natuurlijk niet veel beter. Een component moet herbruikbaar zijn, het is dus nodig om de naam en voornaam, het geboorte- en sterftejaar, en de bijdragen door te geven aan de nieuwe component. Hiervoor kunnen we de properties gebruiken.
We definiëren een nieuwe component ComputerScientist die de eigenschappen van één bekende computerwetenschapper doorgegeven krijgt via de properties. Properties (of props) is een JavaScript object dat informatie bevat die nodig is om de component correct te renderen.
const ComputerScientist = (props) => {
return (
<li>
{props.firstName} {props.lastName} ({props.birth} - {props.death}):
<p>{props.accomplishments}</p>
</li>
)
}
const ComputerScientistListV2 = () => {
return <div>
<h1>Famous computer scientists</h1>
<ul>
<ComputerScientist
firstName={"Charles"} lastName={"Babbage"}
birth={1791} death={1871}
accomplishments={"Originated the concept of a programmable general-purpose computer. Designed the Analytical Engine and built a prototype for a less powerful mechanical calculator. "}
/>
<ComputerScientist
firstName={"Ada"} lastName={"Lovelace"}
birth={1814} death={1852}
accomplishments={"An English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognize that the machine had applications beyond pure calculation, and created the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognize the full potential of a \"computing machine\" and the first computer programmer."}
/>
<ComputerScientist
firstName={"Alan"} lastName={"Turing"}
birth={1912} death={1954}
accomplishments={"Made several fundamental contributions to theoretical computer science, including the Turing machine computational model, the conceiving of the stored program concept and the designing of the high-speed ACE design. Independently of Alonzo Church, he formulated the Church-Turing thesis and proved that first-order logic is undecidable. He also explored the philosophical issues concerning artificial intelligence, proposing what is now known as Turing test."}
/>
</ul>
</div>;
}
export default ComputerScientistListV2;
Alternatieve schrijfwijze voor properties
Properties kunnen ook expliciet opgesomd worden in de functiecomponent, dit vereist dat we de verwachte properties tussen accolades plaatsten. Op deze manier is het duidelijker wat er verwacht wordt, dit is echter meer schrijfwerk en kan de signatuur voor complexe componenten heel groot maken.
const ComputerScientist = ({firstName, lastName, birth, death, accomplishments}) => {
return (
<li>
{firstName} {lastName} ({birth} - {death}):
<p>{accomplishments}</p>
</li>
)
}
Begrip: Properties
De properties of props zijn beschikbaar op elke component en worden meegegeven via een parameter props in de functie die de component definieert. Deze parameter is steeds een JavaScript object.
In JSX-code kunnen properties doorgegeven worden als HTML-attributen.
const FunctionComponent = (props) => {
return <p>{props.example}</p>;
}
const exampleUse = <FunctionComponent
example={"This is an example value for the property example."}/>
Lussen in JSX
In de meeste gevallen zal data, zoals de computerwetenschappers, geladen worden vanuit een API of database, en bewaard worden in een array.
Lijst van computerwetenschappers in JSON-formaat
const computerScientists = [
{
firstName: "Charles",
lastName: "Babbage",
birth: 1791,
death: 1871,
accomplishments: "Originated the concept of a programmable general-purpose computer. Designed the Analytical Engine and built a prototype for a less powerful mechanical calculator. "
},
{
firstName: "Ada",
lastName: "Lovelace",
birth: 1814,
death: 1852,
accomplishments: "An English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognize that the machine had applications beyond pure calculation, and created the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognize the full potential of a \"computing machine\" and the first computer programmer."
},
{
firstName: "Alan",
lastName: "Turing",
birth: 1912,
death: 1954,
accomplishments: "Made several fundamental contributions to theoretical computer science, including the Turing machine computational model, the conceiving of the stored program concept and the designing of the high-speed ACE design. Independently of Alonzo Church, he formulated the Church-Turing thesis and proved that first-order logic is undecidable. He also explored the philosophical issues concerning artificial intelligence, proposing what is now known as Turing test."
}
]
Via een lus kunnen we door deze array itereren en de nodige componenten aanmaken, let op, dit moet gebeuren voor het return keyword. Elk van de nieuwe componenten moet bewaard worden in een nieuwe array die we dan kunnen uitprinten in de JSX-code die teruggegeven wordt.
const ComputerScientistListV3 = () => {
const output = []
for (const scientist of computerScientists) {
output.push(
<ComputerScientist
firstName={scientist.firstName} lastName={scientist.lastName}
birth={scientist.birth} death={scientist.death}
accomplishments={scientist.accomplishments}/>
)
}
return <div>
<h1>Famous computer scientists</h1>
<ul>
{output}
</ul>
</div>;
}
Bovenstaande code kan nog heel wat duidelijker geschreven worden. De spread operator (...) kopieert alle properties van een object en behoudt dezelfde namen voor deze properties. Dus produceert volgende code exact hetzelfde resultaat als hierboven.
for (const scientist of computerScientists) {
output.push(<ComputerScientist {...scientist}/>);
}
Geneste JSX-code
Elke functiecomponent kan gebruikt worden als zelfsluitend HTML-element. Dit is niet altijd voldoende, in sommige gevallen is het nodig om kinderen te definiëren voor een functiecomponent.
Stel, we willen een lijst van letters uitprinten, elke letter krijgt dezelfde opmaak. De component Letter zorgt dus enkel voor de opmaak van de letter en voegt verder niets toe. Als de hoeveelheid kinderen van zo'n component groot wordt, is het onmogelijk om alles via standaard properties door te geven en overzichtelijke en leesbare code te schrijven. Het children property dat aanwezig is op elke component biedt hiervoor een oplossing.
const Letter = (props) => {
return <div>
{/* Render de kinderen van deze component.*/}
{props.children}
</div>;
}
root.render(
<StrictMode>
{/* A is een kind van de component LetterAlternative1*/}
<LetterAlternative1>A</LetterAlternative1>
<LetterAlternative1>E</LetterAlternative1>
<LetterAlternative1>I</LetterAlternative1>
<LetterAlternative1>O</LetterAlternative1>
<LetterAlternative1>U</LetterAlternative1>
</StrictMode>
)
Als we Letter schrijven zonder props.children werkt de code niet en wordt er niets getoond.
CSS
CSS kan op een aantal verschillende manieren toegevoegd worden aan een React applicatie. Natuurlijk kan een stylesheet (.css bestand) nog steeds gekoppeld worden aan de applicatie. Daarnaast kunnen we de CSS code ook bij in een component plaatsen.
CSS via stylesheets
De eerste optie is de meest eenvoudige, we plaatsen een CSS bestand in een map assets in de src directory. Het is belangrijk om stylesheets in de src map te plaatsen, zo worden deze geminimaliseerd tijdens het maken van een production build en worden eventuele ongebruikte lijnen verwijderd. We voegen onderstaande code toe in main.css en importeren dit in main.jsx.
.letter {
padding: 10px;
margin: 10px;
background-color: #ffde00;
color: #333;
display: inline-block;
font-family: monospace;
font-size: 32px;
text-align: center;
}
import './assets/main.css';
De CSS-code verwacht een klasse, deze toevoegen aan de component Letter is niet bijzonder moeilijk. Het is wel belangrijk om op te merken dat we attribuut class niet kunnen gebruiken, dit is namelijk een keyword in JavaScript. React gebruikt het attribuut className om een CSS-klasse mee te geven in JSX-code.
const Letter = (props) => {
return <div className="letter">
{props.children}
</div>;
}
CSS in JavaScript
Het HTML-attribuut style kan gebruikt worden om inline CSS toe te voegen, in React kan dit ook. Het enige verschil is dat we in JSX-code gebruik moeten maken van JavaScript objecten om de stijl toe te voegen, in plaats van een ;-seperated string in HTML. Een belangrijke opmerking is dat CSS eigenschappen niet rechtstreeks vertaald kunnen worden naar JavaScript. Een attribuut als font-family wordt fontFamily, background-color wordt backgroundColor, ... Omdat de CSS in de componenten geschreven is, kunnen properties gebruikt worden om bepaalde eigenschappen te overschrijven.
const Letter = (props) => {
const letterStyle = {
padding: 10,
margin: 10,
backgroundColor: props.bgcolor || "#ffdeEE",
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return <p style={letterStyle}>{props.children}</p>
};
root.render(
<StrictMode>
<LetterAlternative2 bgColor="#FFF">A</LetterAlternative2>
<LetterAlternative2>E</LetterAlternative2>
<LetterAlternative2>I</LetterAlternative2>
<LetterAlternative2>O</LetterAlternative2>
<LetterAlternative2>U</LetterAlternative2>
</StrictMode>
)
Styled Components
De styled-components bibliotheek kan gebruikt worden om klassieke CSS-code te schrijven in een JavaScript file. Dit stelt ons in staat om CSS-properties als font-family te gebruiken onder de echte naam en niet alles tussen quotes te moeten plaatsen. Installeer dit pakket met het commando:
pnpm add styled-components
De bibliotheek wordt gebruikt om een React component te genereren, deze component bevat niets anders dan een HTML5-element met toegevoegde styling. Let op het teken op lijn 3 en 12, dit is een backtick geen single-quote.
import styled from 'styled-components';
const LetterContainer = styled.div`
padding: 10px;
margin: 10px;
background-color: #ffde55;
color: #333;
display: inline-block;
font-family: monospace;
font-size: 32px;
text-align: center;
`;
const LetterAlternative3 = (props) => {
return <LetterContainer>
{props.children}
</LetterContainer>;
}
root.render(
<StrictMode>
<LetterAlternative3>A</LetterAlternative3>
<LetterAlternative3>E</LetterAlternative3>
<LetterAlternative3>I</LetterAlternative3>
<LetterAlternative3>O</LetterAlternative3>
<LetterAlternative3>U</LetterAlternative3>
</StrictMode>
)
Voorbeeldcode & samenvatting
Volledig uitgewerkte lesvoorbeelden met commentaar
layout: Slide
<ExampleCode/>