React is een van de populairste JavaScript-bibliotheken voor het bouwen van gebruikersinterfaces.
Als je front-end-ontwikkelaar wilt worden of een baan als webontwikkelaar wilt vinden, zou je er waarschijnlijk baat bij hebben om React grondig te leren kennen.
In dit bericht ga je enkele basisbeginselen van React leren, zoals het maken van een component, de JSX-syntaxis en Props. Als je geen of weinig ervaring hebt met React, is deze post voor jou.
Om te beginnen, is hier hoe je React kunt installeren.
Wat is JSX?
Het eerste wat je je zult realiseren na het installeren van je eerste React-project is dat een JavaScript-functie wat HTML-code retourneert:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Dit is een speciale en geldige syntaxisuitbreiding voor React die JSX (JavaScript XML) wordt genoemd. Normaal gesproken houden we in frontend-gerelateerde projecten HTML, CSS en JavaScript code in aparte bestanden. In React werkt dit echter een beetje anders.
In React-projecten maken we geen aparte HTML-bestanden, omdat JSX ons in staat stelt HTML en JavaScript gecombineerd in hetzelfde bestand te schrijven, zoals in het voorbeeld hierboven. U kunt echter uw CSS in een ander bestand scheiden.
In het begin lijkt JSX misschien een beetje vreemd. Maar maak je geen zorgen, je zult er aan wennen.
JSX is erg praktisch, omdat we ook elke JavaScript-code (logica, functies, variabelen, enzovoort) direct binnen de HTML kunnen uitvoeren door accolades { } te gebruiken, zoals dit:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}Ook kun je HTML-tags aan JavaScript-variabelen toewijzen:
const message = <h1>React is cool!</h1>;Of u kunt HTML retourneren binnen JavaScript-logica (zoals if-else gevallen):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}Ik zal niet ingaan op verdere details van JSX, maar zorg ervoor dat u de volgende regels in acht neemt bij het schrijven van JSX:
- HTML en component tags moeten altijd worden gesloten < />
- Sommige attributen zoals “class” worden “className” (omdat class verwijst naar JavaScript klassen), “tabindex” wordt “tabIndex” en moet worden geschreven camelCase
- We kunnen niet meer dan één HTML element tegelijk retourneren, dus zorg ervoor dat je ze inpakt in een parent tag:
return ( <div> <p>Hello</p> <p>World</p> </div>);- of als alternatief kunt u ze omwikkelen met lege tags:
return ( <> <p>Hello</p> <p>World</p> </>);U kunt ook mijn React voor Beginners tutorial bekijken voor meer info:
Wat zijn Functionele & Klassecomponenten?
Nadat we gewend zijn aan de JSX-syntaxis, is het volgende wat we moeten begrijpen de op componenten gebaseerde structuur van React.
Als je de voorbeeldcode bovenaan dit bericht nog eens bekijkt, zul je zien dat de JSX-code wordt geretourneerd door een functie. Maar de App( ) functie is geen gewone functie – het is eigenlijk een component. Dus wat is een component?
Wat is een component?
Een component is een onafhankelijk, herbruikbaar codeblok dat de UI in kleinere stukken verdeelt. Als we bijvoorbeeld de UI van Twitter zouden bouwen met React:
In plaats van de hele UI onder één enkel bestand te bouwen, kunnen en moeten we alle secties (gemarkeerd met rood) onderverdelen in kleinere onafhankelijke stukken. Met andere woorden, dit zijn componenten.
React heeft twee soorten componenten: functionele en klassecomponenten. Laten we elk nu in meer detail bekijken.
Functionele Componenten
Het eerste en aanbevolen componenttype in React zijn functionele componenten. Een functionele component is in feite een JavaScript/ES6-functie die een React-element (JSX) retourneert. Volgens de officiële docs van React is de onderstaande functie een geldige functionele component:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Aternatief kun je ook een functionele component maken met de pijlfunctiedefinitie:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Deze functie is een geldige React-component omdat deze een enkel “props” (wat staat voor eigenschappen) objectargument met gegevens accepteert en een React-element retourneert. – reactjs.org
Om een component later te kunnen gebruiken, moet je hem eerst exporteren zodat je hem ergens anders kunt importeren:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Nadat je hem hebt geïmporteerd, kun je de component aanroepen zoals in dit voorbeeld:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Dus een Functionele component in React:
- is een JavaScript/ES6-functie
- moet een React-element (JSX)
- begint altijd met een hoofdletter (naamgevingsconventie)
- neemt zo nodig props als parameter
Wat zijn Class Components?
Het tweede type component is de klassecomponent. Klasse componenten zijn ES6 klassen die JSX teruggeven. Hieronder zie je onze zelfde Welcome functie, dit keer als een class component:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Verschillend van functionele componenten, moeten class componenten een extra render( ) methode hebben voor het retourneren van JSX.
Waarom Class Components gebruiken?
Waarom gebruikten we class componenten vanwege “state”. In de oudere versies van React (versie < 16.8) was het niet mogelijk om state binnen functionele componenten te gebruiken.
Daarom hadden we functionele componenten alleen nodig voor het renderen van UI, terwijl we klassecomponenten zouden gebruiken voor gegevensbeheer en enkele aanvullende bewerkingen (zoals life-cycle methoden).
Dit is veranderd met de introductie van React Hooks, en nu kunnen we ook states gebruiken in functionele componenten. (Ik zal state en hooks in mijn volgende posts behandelen, dus let daar voorlopig niet op).
Een Class Component:
- is een ES6 class, zal een component zijn zodra het een React component ‘uitbreidt’.
- neemt Props aan (in de constructor) indien nodig
- moet een render( ) methode hebben voor het retourneren van JSX
Wat zijn Props in React?
Een ander belangrijk concept van componenten is hoe ze communiceren. React heeft een speciaal object genaamd een prop (staat voor eigenschap) die we gebruiken om gegevens van de ene component naar de andere te transporteren.
Maar wees voorzichtig – props transporteren alleen gegevens in een eenrichtingsstroom (alleen van ouder naar kind-componenten). Het is niet mogelijk met props om gegevens door te geven van kind naar ouder, of naar componenten op hetzelfde niveau.
Laten we de App( ) functie hierboven nog eens bekijken om te zien hoe je gegevens doorgeeft met props.
Eerst moeten we een prop definiëren voor de Welcome-component en er een waarde aan toekennen:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Props zijn aangepaste waarden en ze maken componenten ook dynamischer. Aangezien de Welcome-component hier het kind is, moeten we props definiëren op de ouder (App), zodat we de waarden kunnen doorgeven en het resultaat kunnen krijgen door simpelweg de prop “name” te openen:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
React Props Are Really Useful
Dus React-ontwikkelaars gebruiken props om gegevens door te geven en ze zijn nuttig voor deze taak. Maar hoe zit het met het beheren van gegevens? Props worden gebruikt om gegevens door te geven, niet om ze te manipuleren. Ik ga het beheren van gegevens met React behandelen in mijn toekomstige berichten hier op freeCodeCamp.
In de tussentijd, als je meer wilt leren over React & Webontwikkeling, voel je vrij om je te abonneren op mijn YouTube-kanaal.
Dank je voor het lezen!