Uso de componentes en React

Cada componente conectado corresponde a su propia etiqueta JSX. Por ejemplo, si tenemos un componente Product, entonces le corresponde la siguiente etiqueta:

jsx<Product />

El nombre de la etiqueta del componente debe escribirse obligatoriamente con mayúscula para que React pueda distinguir la llamada a un componente del uso de una etiqueta HTML.

Entonces, dentro del componente App usemos el componente Product escribiendo su etiqueta correspondiente:

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

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

export default App;

Como resultado, después del renderizado obtendremos lo siguiente:

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