Skip to content
Skip to content
Menu
Info Cafe
Info Cafe

React Components

By admin on februari 3, 2021

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.

Exemplaar

Maak een Class-component genaamd Car

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 />

Exemplaar

Display de Car component in het “root”-element:

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

Run Voorbeeld “

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.

Example

Maak een Functie-component genaamd Car

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):

Example

Display de Car component in het “root” element:

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

Run Voorbeeld “

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).

Exemplaar

Maak een constructorfunctie in de auto-component, en voeg een kleur-eigenschap toe:

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:

Voorbeeld

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

Render”

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.

Exemplaar

Gebruik een attribuut om een kleur door te geven aan de Car component, en gebruik deze in de render() functie:

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

Run voorbeeld”

Componenten in Componenten

We kunnen naar componenten binnen andere componenten verwijzen:

Voorbeeld

Gebruik de Car component binnen de Garage component:

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'));

Uitvoeren Voorbeeld”

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;.

Example

Dit is het nieuwe bestand, we hebben het “App.js”:

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.

Example

Nu importeren we het “App.js” bestand in de toepassing, en kunnen we het Auto component gebruiken alsof het hier is gemaakt.

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

Run Voorbeeld”

Berichtnavigatie

Het tijdperk van het veganisme: Veganistische gezondheidsstatistieken voor 2020
“Sorry voor het ongemak” – Hoe een oprechte verontschuldiging aan te bieden

Geef een reactie Antwoord annuleren

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Meest recente berichten

  • 9 Beste Vitaminen en Supplementen voor honden voor een betere gezondheid
  • CD-rentevoorspelling voor 2021: Tarieven blijven waarschijnlijk laag, maar kunnen later in het jaar stijgen
  • Hoe de documentatie van het kwaliteitsmanagementsysteem te structureren
  • Chronische bekkenpijn en prostatitis: symptomen, diagnose en behandeling
  • Mixed Berry Crisp
  • Koolhydraatarm chocoladepuddingrecept
  • Gezonde spelletjes en activiteiten voor kinderen | UIC Online Informatics
  • De voordelen van borstvoeding na één jaar
  • Is het veilig om koffiedik door de gootsteen te spoelen | Atomic Plumbing
  • Onze werkzaamheden

Meta

  • Inloggen
  • Berichten feed
  • Reacties feed
  • WordPress.org

Archief

  • maart 2021
  • februari 2021
  • januari 2021
  • december 2020
  • DeutschDeutsch
  • NederlandsNederlands
  • EspañolEspañol
  • FrançaisFrançais
  • PortuguêsPortuguês
  • ItalianoItaliano
  • PolskiPolski
  • 日本語日本語
©2021 Info Cafe | WordPress Theme by SuperbThemes.com