Gebruik van componenten in React

Aan elke geïmporteerde component correspondeert zijn eigen JSX-tag. Stel, we hebben een component Product, dan hoort daarbij de volgende tag:

jsx<Product />

De naam van de component-tag moet altijd met een hoofdletter worden geschreven, zodat React het gebruik van een component kan onderscheiden van een HTML-tag.

Laten we nu binnen de component App de component Product gebruiken, door de bijbehorende tag te schrijven:

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

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

export default App;

Het resultaat na het renderen zal het volgende zijn:

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