Einführung in React-Komponenten

Schauen wir uns eine beliebige Website an. Sie besteht aus einer Reihe unabhängiger Blöcke: Header, Sidebars, Footer, Inhalt. Man kann sagen, dass diese Blöcke Komponenten im Sinne von React sind.

Wenn wir uns denselben Header ansehen, was kann man darin auszeichnen? Einen Block mit dem Logo, einen Kontaktblock, einen Block mit dem Menü und so weiter. Das bedeutet, Komponenten können aus anderen Unterkomponenten bestehen.

In React verhält es sich ähnlich - die Website wird aus einer Reihe von Komponenten aufgebaut, die wiederum andere Komponenten enthalten können.

In React ist jede Komponente ein eigenes Modul. Normalerweise beginnt die Entwicklung mit der Hauptkomponente App, die die anderen in sich enthält.

Lasst uns üben, neue Komponenten zu erstellen.

Nehmen wir an, wir benötigen für unser Beispiel eine Komponente, die Produktdaten anzeigt. Dazu müssen wir in unserem Arbeits- ordner eine Datei Product.js erstellen und den folgenden Code hinzufügen:

import React from 'react';

function Product() {
	return <p>
		product
	</p>;
}

export default Product;

Wie Sie sehen, gibt unsere Komponente momentan einen Absatz mit Text zurück. In den folgenden Lektionen werden wir diesen Text so anpassen, dass die Produktdaten zurückgegeben werden, formatiert in das von uns gewünschte Markup. Aber vorerst lassen wir der Einfachheit halber nur einen Absatz mit Platzhaltertext.

Lasst uns nun unsere erstellte Komponente in der Komponente App anzeigen. Nehmen wir an, unser App hat momentan den folgenden Code:

import React from 'react';

function App() {
	return <div>
		text
	</div>;
}

export default App;

Zuerst müssen wir unsere erstellte Produktkomponente importieren:

import React from 'react';
import Product from './Product'; // importieren das Produkt

function App() {
	return <div>
		text
	</div>;
}

export default App;

Nach einem solchen Import kann die Komponente Product innerhalb der Komponente App verwendet werden.