Komponentide kasutamine Reactis

Iga ühendatud komponendi vastab oma JSX silt. Näiteks meil on komponent Product, mis tähendab, et sellele vastab järgmine silt:

jsx<Product />

Komponendi silti nimetus tuleb tingimata kirjutada suure algustähega, et React suudaks eristada komponendi kutsumist HTML silti kasutamisest.

Nii, kasutame komponendi App sees komponenti Product, kirjutades sellele vastava silti:

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

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

export default App;

Tulemusena saadakse pärast renderdamist järgmine:

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