Verwendung von Komponenten in React

Jede importierte Komponente entspricht einem eigenen JSX-Tag. Beispielsweise haben wir eine Komponente Product, was dem folgenden Tag entspricht:

jsx<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:

jsximport 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:

html<div>
  <p>
    product
  </p>
</div>