Introdução à Abordagem de Componentes no React

Suponha que temos um site. Neste site, podemos identificar alguns blocos: cabeçalho, conteúdo, barra lateral, rodapé e assim por diante. Cada bloco pode ser dividido em sub-blocos menores. Por exemplo, no cabeçalho, geralmente é possível identificar o logotipo, o menu, o bloco de contatos e assim por diante.

No React, cada bloco desse é chamado de componente. Cada componente pode conter dentro de si componentes menores, que por sua vez contêm outros ainda menores e assim por diante.

Cada componente no React corresponde a um módulo ES6, localizado na pasta src. O nome do arquivo do módulo é escrito com letra maiúscula e deve corresponder à função que está localizada no código desse módulo.

Por exemplo, um arquivo chamado App.js deve conter dentro de si a função App:

App.jsimport React from 'react';

function App() {
  // código do componente
}

export default App;

Um dos componentes deve ser o principal - aquele ao qual os outros componentes são adicionados. No React, por padrão, esse componente será o componente App. A este componente, outros componentes serão conectados. Como isso é feito - veremos mais adiante no tutorial.