Använda komponenter i React

Varje ansluten komponent motsvarar sin egen JSX-tagg. Till exempel, om vi har en komponent Product, betyder det att den motsvaras av följande tagg:

jsx<Product />

Namnet på komponenttaggen måste skrivas med stor bokstav, så att React kan skilja mellan anrop av en komponent och användning av en HTML-tagg.

Så, låt oss inuti komponenten App använda komponenten Product genom att skriva dess motsvarande tagg:

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

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

export default App;

Som ett resultat av renderingen kommer följande att erhållas:

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