Comunicação entre componentes no React

Fala pessoal, beleza!? Um dos primeiros desafios de quem está começando no mundo do React é como trafegar informações entre componentes Pais e Filhos. Neste artigo, vamos utilizar um exemplo prático para entender melhor como essa comunicação deve ser feita.

Construiremos uma aplicação que busca imagens em uma API aberta e utilizaremos a Pixabay API para isso. Nossa aplicação irá listar imagens de acordo com um termo pesquisado.

Antes de mais nada, precisamos saber que o React é uma biblioteca JavaScript, open source e criada pelo Facebook para desenvolver interfaces visuais. Com ele, podemos criar interfaces interativas baseadas em componentes que podem ser atualizados individualmente, mantendo o estado fora do DOM (Document Object Model).

Bom, já sabemos que o React é baseado em componentes, mas o que são componentes? De uma maneira simples, podemos entender que componentes são pequenos, simples e reutilizáveis, responsáveis por renderizar e atualizar dados na tela. Dessa forma, quando o componente sofre alteração, somente ele é atualizado, não sendo necessário percorrer todo o DOM para alterar o que é exibido na tela.

Componentes podem ser baseados em classes ou em funções. Em nosso projeto, os componentes serão baseados em classes, que estão disponíveis a partir do ES6 (EcmaScript 2015). Componentes são divididos em partes distintas com funções específicas e podem ser reutilizados por outros componentes. Eles também podem retornar outros componentes, uma string ou um array, por exemplo.

Se um elemento é utilizado muitas vezes em sua UI, como um botão, painel ou table, ou se por si só possui uma certa complexidade, como uma área de comentários, feed de notícias ou uma lista de imagem, então você tem um forte candidato a ser um componente reutilizável.

Vamos entender, com ajuda da imagem abaixo, como será a estrutura de nossos componentes:

Como podemos ver nessa imagem, os componentes SearchBar e Images serão importados dentro do componente App. O componente SearchBarfilho do componente App, irá conter um formulário e sua função será retornar o texto digitado pelo usuário quando o formulário for submetido.

No componente pai App, iremos capturar o texto digitado e realizar a chamada na API de imagens. O resultado (que será um array de imagens) será enviado ao componente filho Images para ser exibido para o usuário. Ainda teremos mais um componente ImageCard, que irá receber e renderizar cada imagem individualmente. Dessa forma, iremos enviar e receber dados entre componentes pais e filhos.

Agora que entendemos o que são componentes e como nossa aplicação deve se comportar, vamos aos códigos! 😎

Na classe SearchBar, usamos o state para armazenar o valor digitado no formulário e props quando o formulário é submetido. Mas qual a diferença entre eles?

De forma resumida, o state é definido e manipulado somente no componente que o contém, então podemos dizer que ele é privado. No state, podemos setar mais de um atributo. Lembre-se de sempre que precisar alterar um valor no state utilizando a função setState().

Já o props é utilizado para setar um valor ou objeto imutável, utilizado para ser enviado para outros componentes. Você deve estar se perguntando: como esse valor é atualizado, já que ele é imutável? Apesar de imutáveis, quando o valor passado na propriedade é atualizado pelo state, essa mudança também é desencadeada para a propriedade, atualizando seu valor.

Quando desejamos enviar um valor do componente filho, para o componente pai, precisamos definir uma função de callback no componente pai, que irá receber a atualização do valor da propriedade sempre que o valor for alterado. É dessa forma que enviaremos o texto digitado no componente SearchBar para o componente App, veja a seguir:

Ao importar o componente SearchBar no componente App, definimos a propriedade onSubmit, que está recebendo o texto digitado no formulário de pesquisa. Utilizamos esse valor na função onSearchSubmit para buscar o termo digitado na API de imagens e atualizar o array images no state.

O array de imagens é passado como propriedade para o componente Images, que irá iterar cada imagem da lista e enviar para o componente ImageCard. Esse, por sua vez, irá tratar cada imagem individualmente, pois cada imagem irá utilizar um tamanho diferente para ser exibida.

Agora já sabemos como o React trabalha com componentes e como trafegar dados entre eles. Veja abaixo o resultado final de nossa aplicação. O código fonte também está disponível no GitHub 😁

Código fonte: https://github.com/vitoralves/search-photos
React Docs: https://reactjs.org/

Gostou desse conteúdo e quer receber ainda mais?! Me siga em minhas redes sociais e fique por dentro de todas as novidades!

Instagram: @professorvitoralves
Facebook: https://www.facebook.com/professorvitoralves