Reageer componenten
Componenten zijn als functies die HTML-elementen retourneren.
Reageer componenten
Componenten zijn onafhankelijke en herbruikbare stukjes code. Ze hebben hetzelfde doel als JavaScript-functies, maar werken afzonderlijk en retourneren HTML.
Componenten zijn er in twee soorten, klassecomponenten en functiecomponenten, in deze tutorial zullen we ons concentreren op functiecomponenten.
In oudere React-codebases kan het zijn dat Class-componenten voornamelijk worden gebruikt. Er wordt nu voorgesteld om Function-componenten samen met Hooks te gebruiken, die zijn toegevoegd in React 16.8. Er is een optionele sectie over Klasse-componenten voor uw referentie.
Maak je eerste component
Bij het maken van een React-component MOET de naam van de component beginnen met een hoofdletter.
Klasse Component
Een klassecomponent moet de extends React.Componentinstructie bevatten. Deze instructie creëert een overerving naar React.Component en geeft uw component toegang tot de functies van React.Component.
De component vereist ook een render()methode, deze methode retourneert HTML.
Voorbeeld
Maak een Klasse-component met de naam Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Functie Component
Hier is hetzelfde voorbeeld als hierboven, maar in plaats daarvan gemaakt met behulp van een functie-component.
Een functiecomponent retourneert ook HTML en gedraagt zich ongeveer hetzelfde als een klassecomponent, maar functiecomponenten kunnen worden geschreven met veel minder code, zijn gemakkelijker te begrijpen en hebben de voorkeur in deze zelfstudie.
Voorbeeld
Maak een functiecomponent met de naam Car
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
Gecertificeerd!
$95 INSCHRIJVEN
Een component renderen
<h2>Nu heeft je React-applicatie een component genaamd Car, die een element retourneert
.
Om dit onderdeel in uw toepassing te gebruiken, gebruikt u vergelijkbare syntaxis als normale HTML:
<Car />
Voorbeeld
Geef de Carcomponent weer in het "root"-element:
ReactDOM.render(<Car />, document.getElementById('root'));
Rekwisieten
Componenten kunnen worden doorgegeven als props, wat staat voor eigenschappen.
Props zijn als functieargumenten en je stuurt ze als attributen naar de component.
propsIn het volgende hoofdstuk leest u er meer over .
Voorbeeld
Gebruik een attribuut om een kleur door te geven aan de Car-component en gebruik deze in de render()-functie:
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Componenten in Componenten
We kunnen verwijzen naar componenten in andere componenten:
Voorbeeld
Gebruik de component Auto in de component Garage:
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Componenten in Bestanden
Bij React draait alles om het hergebruiken van code, en het is aan te raden om je componenten op te splitsen in aparte bestanden.
Om dat te doen, maakt u een nieuw bestand met een .js
bestandsextensie en plaatst u de code erin:
Merk op dat de bestandsnaam moet beginnen met een hoofdletter.
Voorbeeld
Dit is het nieuwe bestand, we hebben het "Car.js" genoemd:
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
Om het onderdeel Auto te kunnen gebruiken, moet u het bestand importeren in uw applicatie.
Voorbeeld
Nu importeren we het bestand "Car.js" in de toepassing en kunnen we het
Car
onderdeel gebruiken alsof het hier is gemaakt.
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));