Brug af komponenter i React

Hver tilkoblet komponent svarer til sit eget JSX-tag. For eksempel, vi har komponenten Product, hvilket betyder at den svarer til følgende tag:

jsx<Product />

Navnet på komponenttagget skal altid skrives med stort bogstav, så React kan skelne mellem et komponentkald og brug af et HTML-tag.

Så lad os inde i komponenten App bruge komponenten Product ved at skrive det tilsvarende tag:

jsximport React from 'react';
import Product from './Product';

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

export default App;

Som resultat efter renderingen vil følgende blive opnået:

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