Aplicação simples com os primeiros componentes

O exemplo criado pode ser visualizado na Figura 1.

Para chegarmos nesse resultado vamos aprender os seguintes tópicos:

• Criar um componente;
• Exportar um componente;
• Importar um componente;
• Estilizar utilizando CSS.

O que são componentes

Componentes são, basicamente, elementos visuais exibidos na tela para o usuário.

Por exemplo, em uma página Web podemos dizer que um botão é um componente, um item de menu é um componente, um campo de edição de dados é um componente e assim por diante.

Além disso, a própria página Web, em si, também é um componente (que contém componentes filhos).

Por que isso é útil?

Todo elemento visual no React é um componente.

Utilizar componentes facilita na manutenção da aplicação já que dividimos um código inteiro em partes menores. Além de conseguirmos reaproveitar nosso código.