Introdução aos Componentes React

Vejamos qualquer site. Ele consiste em um conjunto de blocos independentes: cabeçalho, barras laterais, rodapé, conteúdo. Podemos dizer que esses blocos são componentes no sentido que é entendido no React.

Se olharmos para o mesmo cabeçalho, o que nele pode ser destacado? Um bloco com o logotipo, um bloco de contatos, um bloco com menu e assim por diante. Ou seja, os componentes podem consistir em outros subcomponentes.

Da mesma forma, as coisas funcionam no React - um site é construído a partir de um conjunto de componentes, que por sua vez podem conter outros componentes.

No React, cada componente representa um módulo separado. Normalmente, o desenvolvimento começa com o componente principal App, que contém os demais.

Vamos praticar a criação de novos componentes.

Suponha, por exemplo, que precisamos de um componente que exiba os dados de um produto. Para isso, precisamos criar um arquivo Product.js na pasta de trabalho e adicionar o seguinte código:

import React from 'react';

function Product() {
	return <p>
		produto
	</p>;
}

export default Product;

Como você pode ver, atualmente nosso componente retorna um parágrafo com texto. Nas próximas lições, ajustaremos este texto para que retorne os dados do produto, formatados na marcação desejada. Mas por enquanto, para aquecer, vamos deixar apenas um parágrafo com um texto de exemplo.

Agora vamos exibir nosso componente criado no componente App. Suponha que nosso App atualmente tenha o seguinte código:

import React from 'react';

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

export default App;

Primeiro, precisamos importar o componente de produto que criamos:

import React from 'react';
import Product from './Product'; // importamos o produto

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

export default App;

Após essa importação, dentro do componente App é possível usar o componente Product.