Uporaba komponent v Reactu

Vsaki priključeni komponenti ustreza svoja JSX oznaka. Na primer, imamo komponento Product, kar pomeni, da ji ustreza naslednja oznaka:

jsx<Product />

Ime oznake komponente je nujno potrebno pisati z veliko začetnico, da lahko React razlikuje klic komponente od uporabe HTML oznake.

Torej, uporabimo komponento Product znotraj komponente App tako, da napišemo ustrezno oznako:

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

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

export default App;

Kot rezultat po renderjanju dobimo naslednje:

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