Bruk av komponenter i React

Hver tilkoblede komponent tilsvarer sin egen JSX-tag. For eksempel, vi har komponenten Product, som betyr at den tilsvarer følgende tag:

jsx<Product />

Navnet på komponenttaggen må skrives med stor bokstav, slik at React kan skille komponentkall fra bruk av HTML-tagger.

Så, la oss inne i komponenten App bruke komponenten Product ved å skrive den tilsvarende taggen:

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

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

export default App;

Som et resultat etter rendering vil vi få følgende:

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