React-Komponenten

Komponenten sind wie Funktionen, die HTML-Elemente zurückgeben.

React-Komponenten

Komponenten sind unabhängige und wiederverwendbare Codestücke. Sie dienen demselben Zweck wie JavaScript-Funktionen, arbeiten aber isoliert und geben HTML über eine render()-Funktion zurück.

Komponenten gibt es in zwei Arten, Klassenkomponenten und Funktionskomponenten, in diesem Tutorial werden wir uns auf Klassenkomponenten konzentrieren.

Erstellen einer Klassenkomponente

Bei der Erstellung einer React-Komponente muss der Name der Komponente mit einem Großbuchstaben beginnen.

Die Komponente muss die Anweisung extends React.Component enthalten, diese Anweisung erzeugt eine Vererbung zu React.Component und gibt Ihrer Komponente Zugriff auf die Funktionen von React.Component.

Die Komponente benötigt außerdem eine Methode render(), diese Methode gibt HTML zurück.

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

Jetzt hat Ihre React-Anwendung eine Komponente namens Auto, die ein<h2>-Element zurückgibt.

Um diese Komponente in Ihrer Anwendung zu verwenden, verwenden Sie eine ähnliche Syntax wie bei normalem HTML:<Car />

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

Erstellen einer Function-Komponente

Hier ist das gleiche Beispiel wie oben, aber stattdessen mit einer Function-Komponente erstellt.

Eine Function-Komponente gibt ebenfalls HTML zurück und verhält sich so ziemlich genauso wie eine Class-Komponente, aber Class-Komponenten haben einige Ergänzungen und werden in diesem Tutorial bevorzugt.

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

Wiederum hat Ihre React-Anwendung eine Car-Komponente.

Referenzieren Sie die Car-Komponente wie normales HTML (außer in React müssen Komponenten mit einem Großbuchstaben beginnen):

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

Komponentenkonstruktor

Wenn es eine constructor()-Funktion in Ihrer Komponente gibt, wird diese Funktion aufgerufen, wenn die Komponente gestartet wird.

Die Konstruktorfunktion ist der Ort, an dem Sie die Eigenschaften der Komponente initiieren.

In React sollten die Komponenteneigenschaften in einem Objekt namensstate gehalten werden.

Sie werden später in diesem Tutorial mehr über state erfahren.

Die Konstruktorfunktion ist auch der Ort, an dem Sie die Vererbung der übergeordneten Komponente honorieren, indem Sie die super()-Anweisung einfügen, die die Konstruktorfunktion der übergeordneten Komponente ausführt, und Ihre Komponente hat Zugriff auf alle Funktionen der übergeordneten Komponente (React.Component).

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

Verwenden Sie die Farbeigenschaft in der Funktion render():

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

Props

Eine weitere Möglichkeit, Komponenteneigenschaften zu behandeln, ist die Verwendung von props.

Props sind wie Funktionsargumente, die Sie als Attribute in die Komponente schicken.

Im nächsten Kapitel erfahren Sie mehr über props.

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

Komponenten in Komponenten

Wir können auf Komponenten innerhalb anderer Komponenten verweisen:

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

Komponenten in Dateien

Bei React dreht sich alles um die Wiederverwendung von Code, und es kann sinnvoll sein, einige Ihrer Komponenten in separate Dateien einzufügen.

Um das zu tun, erstellen Sie eine neue Datei mit der Dateierweiterung .js und fügen den Code darin ein:

Beachten Sie, dass die Datei mit dem Import von React beginnen muss (wie zuvor), und sie muss mit der Anweisung export default Car; enden.

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;

Um die Car-Komponente verwenden zu können, müssen Sie die Datei in Ihre Anwendung importieren.

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