Komponenttien käyttö Reactissa

Jokainen tuotu komponentti vastaa omaa JSX-tagia. Esimerkiksi, meillä on komponentti Product, mikä tarkoittaa, että sitä vastaa seuraava tagi:

jsx<Product />

Komponenttitagin nimen on aina oltava kirjoitettu isolla alkukirjaimella, jotta React voi erottaa komponentin kutsun HTML-tagin käytöstä.

Joten, käytetään App-komponentin sisällä komponenttia Product kirjoittamalla sitä vastaava tagi:

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

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

export default App;

Tuloksena renderöinnin jälkeen saadaan seuraava:

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