Reaktionskomponenten

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

Reaktionskomponenten

Komponenten sind unabhängige und wiederverwendbare Codebits. Sie dienen demselben Zweck wie JavaScript-Funktionen, arbeiten jedoch isoliert und geben HTML zurück.

Es gibt zwei Arten von Komponenten, Klassenkomponenten und Funktionskomponenten. In diesem Tutorial konzentrieren wir uns auf Funktionskomponenten.

Erstellen Sie Ihre erste Komponente

Beim Erstellen einer React-Komponente MUSS der Name der Komponente mit einem Großbuchstaben beginnen.

Klasse Komponente

Eine Klassenkomponente muss die extends React.ComponentAnweisung enthalten. Diese Anweisung erstellt eine Vererbung an React.Component und gibt Ihrer Komponente Zugriff auf die Funktionen von React.Component.

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

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

Funktionskomponente

Hier ist das gleiche Beispiel wie oben, aber stattdessen mit einer Funktionskomponente erstellt.

Eine Funktionskomponente gibt auch HTML zurück und verhält sich ähnlich wie eine Klassenkomponente, aber Funktionskomponenten können mit viel weniger Code geschrieben werden, sind einfacher zu verstehen und werden in diesem Lernprogramm bevorzugt.

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

Rendern einer Komponente

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

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

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

Requisiten

Komponenten können als übergeben werden props, was für Eigenschaften steht.

Props sind wie Funktionsargumente, und Sie senden sie als Attribute an die Komponente.

propsIm nächsten Kapitel erfahren Sie mehr darüber .

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Komponenten in Komponenten

Wir können auf Komponenten innerhalb anderer Komponenten verweisen:

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

Komponenten in Dateien

Bei React dreht sich alles um die Wiederverwendung von Code, und es wird empfohlen, Ihre Komponenten in separate Dateien aufzuteilen.

Erstellen Sie dazu eine neue Datei mit einer .js Dateierweiterung und fügen Sie den Code darin ein:

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

export default Car;

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

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

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

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}