Einführung in den Komponentenansatz in React

Nehmen wir an, wir haben eine Website. Auf dieser Website können wir bestimmte Blöcke unterscheiden: Header, Inhalt, Sidebar, Footer und so weiter. Jeden Block kann man in kleinere Unterblöcke unterteilen. Zum Beispiel kann man im Header normalerweise das Logo, das Menü, den Kontaktblock und so weiter unterscheiden.

In React wird jeder solche Block Komponente genannt. Jede Komponente kann kleinere Komponenten enthalten, diese wiederum noch kleinere und so weiter.

Jeder Komponente in React entspricht ein ES6-Modul, located im Ordner src. Der Dateiname des Moduls wird mit einem Großbuchstaben geschrieben und muss der Funktion entsprechen, die sich im Code dieses Moduls befindet.

Zum Beispiel sollte die Datei mit dem Namen App.js innerhalb sich die Funktion App enthalten:

import React from 'react';

function App() {
	// Komponentencode
}

export default App;

Eine der Komponenten muss die Hauptkomponente sein - diejenige, zu der die anderen Komponenten hinzugefügt werden. In React wird standardmäßig diese Komponente die Komponente App sein. An diese Komponente werden andere Komponenten angeschlossen. Wie das gemacht wird - werden wir weiter im Lehrbuch besprechen.