Inleiding tot de componentbenadering in React
Stel we hebben een website. Op deze website kunnen we enkele blokken onderscheiden: een header, inhoud, een zijbalk, een footer enzovoort. Elk blok kan worden onderverdeeld in kleinere subblokken. Bijvoorbeeld in de header kunnen we meestal een logo, een menu, een contactblok enzovoort onderscheiden.
In React wordt elk zo'n blok een component genoemd. Elke component kan kleinere componenten bevatten, die op hun beurt weer nog kleinere bevatten, enzovoort.
Aan elke component in React correspondeert
een ES6-module, gelegen in de map src.
De bestandsnaam van de module wordt met een hoofdletter geschreven
en moet overeenkomen met de functie die
in de code van deze module staat.
Bijvoorbeeld, het bestand met de naam App.js
moet binnenin de functie App bevatten:
import React from 'react';
function App() {
// componentcode
}
export default App;
Eén van de componenten moet de hoofdcomponent zijn
- degene waaraan de andere componenten worden toegevoegd.
In React is standaard deze component
de component App.
Aan deze component zullen andere
componenten worden gekoppeld. Hoe dit wordt gedaan - dat behandelen we
verder in de tutorial.
