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:
<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:
import 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:
<div>
<p>
product
</p>
</div>
Crie um componente User que irá
exibir dados de usuários. Por enquanto, deixe este
componente simplesmente exibir algum texto.
Use este componente dentro do componente App.