React Components

Components zijn een soort functies die HTML-elementen retourneren.

React Components

Components zijn onafhankelijke en herbruikbare stukjes code.Ze dienen hetzelfde doel als JavaScript-functies, maar werken geïsoleerd en retourneren HTML via een render() functie.

Componenten zijn er in twee soorten, Class-componenten en Functie-componenten, in deze tutorial zullen we ons concentreren op Class-componenten.

Een Class-component maken

Bij het maken van een React-component moet de naam van de component beginnen met een hoofdletter.

De component moet het extends React.Component statement bevatten, dit statement creëert een overerving naar React.Component, en geeft je component toegang tot de functies van React.Component.

De component heeft ook een render() method nodig, deze method retourneert HTML.

class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; }}

Nu heeft je React-applicatie een component genaamd Car, die een <h2> element retourneert.

Om dit component in je applicatie te gebruiken, gebruik je een vergelijkbare syntaxis als normale HTML:<Car />

ReactDOM.render(<Car />, document.getElementById('root'));

Maak een Functie Component

Hier ziet u hetzelfde voorbeeld als hierboven, maar dan gemaakt met een Functie component.

Een Function component retourneert ook HTML, en gedraagt zich vrijwel hetzelfde als een Class component, maar Class componenten hebben enkele toevoegingen, en zullen in deze tutorial de voorkeur krijgen.

function Car() { return <h2>Hi, I am also a Car!</h2>;}

Opnieuw heeft je React-applicatie een Auto component.

Refereer naar de Car component als normale HTML (behalve in React, componenten moeten beginnen met een hoofdletter):

ReactDOM.render(<Car />, document.getElementById('root'));

Component Constructor

Als er een constructor() functie in je component zit, zal deze functie worden aangeroepen als de component wordt opgestart.

De constructorfunctie is de plaats waar je de eigenschappen van de component initieert.

In React moeten de eigenschappen van de component worden bewaard in een object genaamdstate.

Je leert later in deze tutorial meer over state.

De constructorfunctie is ook de plaats waar je de overerving van de oudercomponent honoreert door het super() statement op te nemen, waarmee de constructorfunctie van de oudercomponent wordt uitgevoerd, en je component toegang heeft tot alle functies van de oudercomponent (React.Component).

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a Car!</h2>; }}

Gebruik de kleur-eigenschap in de render() functie:

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a {this.state.color} Car!</h2>; }}

Props

Een andere manier om met component-eigenschappen om te gaan is door gebruik te maken van props.

Props zijn net functieargumenten, en je stuurt ze als attributen naar de component.

Je leert meer over props in het volgende hoofdstuk.

class Car extends React.Component { render() { return <h2>I am a {this.props.color} Car!</h2>; }}ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Componenten in Componenten

We kunnen naar componenten binnen andere componenten verwijzen:

class Car extends React.Component { render() { return <h2>I am a Car!</h2>; }}class Garage extends React.Component { render() { return ( <div> <h1>Who lives in my Garage?</h1> <Car /> </div> ); }}ReactDOM.render(<Garage />, document.getElementById('root'));

Components in Files

React draait om hergebruik van code, en het kan slim zijn om sommige van je componenten in aparte bestanden te plaatsen.

Om dat te doen, maak je een nieuw bestand met een .js bestandsextensie en zet je de code erin:

Merk op dat het bestand moet beginnen met het importeren van React (zoals eerder), en het moet eindigen met de verklaring export default Car;.

import React from 'react';import ReactDOM from 'react-dom';class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; }}export default Car;

Om de Car component te kunnen gebruiken, moet je het bestand importeren in je applicatie.

import React from 'react';import ReactDOM from 'react-dom';import Car from './App.js';ReactDOM.render(<Car />, document.getElementById('root'));