Komponensek használata Reactben

Minden importált komponenshez tartozik saját JSX tag. Például, van egy Product komponensünk, amihez a következő tag tartozik:

jsx<Product />

A komponens tag nevét nagy betűvel kell írni, hogy a React meg tudja különböztetni a komponens hívását a HTML tag használatától.

Tehát, használjuk a Product komponenst a App komponensen belül, az ahhoz tartozó tag megírásával:

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

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

export default App;

Az eredmény a renderelés után a következő lesz:

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