Utilizarea componentelor în React

Fiecărei componente conectate îi corespunde propriul său tag JSX. De exemplu, avem componenta Product, ceea ce înseamnă că îi corespunde următorul tag:

jsx<Product />

Numele tag-ului componentei trebuie obligatoriu scris cu literă mare, astfel încât React să poată distinge apelul componentei de utilizarea tag-ului HTML.

Deci, haideți să utilizăm componenta Product în interiorul componentei App, scriind tag-ul corespunzător acesteia:

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

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

export default App;

Ca rezultat, după randare se va obține următoarele:

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