Utilização de Componentes no React

Cada componente importado corresponde a sua própria tag JSX. Por exemplo, se temos um componente Product, isso significa que ele corresponde à seguinte tag:

jsx<Product />

O nome da tag do componente deve sempre ser escrito com letra maiúscula, para que o React possa distinguir a chamada do componente do uso de uma tag HTML.

Então, vamos usar o componente Product dentro do componente App, escrevendo a tag correspondente:

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

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

export default App;

Como resultado, após a renderização, obteremos o seguinte:

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