Verwendung von Komponenten in React
Jede importierte Komponente entspricht
einem eigenen JSX-Tag. Beispielsweise haben wir eine Komponente
Product, was dem folgenden Tag
entspricht:
<Product />
Der Name des Komponenten-Tags muss zwingend mit einem Großbuchstaben geschrieben werden, damit React unterscheiden kann, ob es sich um einen Komponentenaufruf oder um ein HTML-Tag handelt.
Lassen Sie uns also innerhalb der Komponente App
die Komponente Product verwenden, indem wir
das entsprechende Tag schreiben:
import React from 'react';
import Product from './Product';
function App() {
return <div>
<Product />
</div>;
}
export default App;
Das Ergebnis nach dem Rendern sieht folgendermaßen aus:
<div>
<p>
product
</p>
</div>
Erstellen Sie eine Komponente User, die
Benutzerdaten ausgibt. Lassen Sie diese Komponente vorerst einfach
irgendeinen Text ausgeben.
Verwenden Sie diese Komponente in der Komponente App.
