Pensando em React

O React pode mudar a forma como você pensa sobre os designs que observa e os aplicativos que constrói. Quando você cria uma interface de usuário com React, primeiro a divide em partes chamadascomponentes. Em seguida, você descreve os diferentes estados visuais para cada um dos seus componentes. Por fim, você conecta seus componentes para que os dados fluam através deles. Neste tutorial, vamos guiá-lo pelo processo de pensamento de construção de uma tabela de dados de produtos pesquisável com React.

Comece com o mockup

Imagine que você já tenha uma API JSON e um mockup de um designer.

A API JSON retorna alguns dados que se parecem com isto:

O mockup se parece com isto:

Para implementar uma UI em React, você geralmente seguirá os mesmos cinco passos.

Passo 1: Divida a UI em uma hierarquia de componentes

Comece desenhando caixas ao redor de cada componente e subcomponente no mockup e nomeando-os. Se você trabalha com um designer, ele pode já ter nomeado esses componentes em sua ferramenta de design. Pergunte a ele!

Dependendo da sua formação, você pode pensar em dividir um design em componentes de diferentes maneiras:

• Programação—use as mesmas técnicas para decidir se deve criar uma nova função ou objeto. Uma dessas técnicas é aseparação de preocupações, ou seja, um componente idealmente deve se preocupar apenas com uma coisa. Se ele acabar crescendo, deve ser decomposto em subcomponentes menores.
• CSS—considere para o que você criaria seletores de classe. (No entanto, os componentes são um pouco menos granulares.)
• Design—considere como você organizaria as camadas do design.

Se seu JSON estiver bem estruturado, você frequentemente descobrirá que ele mapeia naturalmente para a estrutura de componentes da sua UI. Isso acontece porque a UI e os modelos de dados frequentemente têm a mesma arquitetura de informação—ou seja, a mesma forma. Separe sua UI em componentes, onde cada componente corresponde a uma parte do seu modelo de dados.

Há cinco componentes nesta tela:

1. FilterableProductTable(cinza) contém todo o aplicativo.
2. SearchBar(azul) recebe a entrada do usuário.
3. ProductTable(lavanda) exibe e filtra a lista de acordo com a entrada do usuário.
4. ProductCategoryRow(verde) exibe um cabeçalho para cada categoria.
5. ProductRow(amarelo) exibe uma linha para cada produto.

Se você olhar paraProductTable(lavanda), verá que o cabeçalho da tabela (contendo os rótulos "Nome" e "Preço") não é um componente próprio. Isso é uma questão de preferência, e você pode escolher qualquer abordagem. Para este exemplo, ele faz parte doProductTableporque aparece dentro da lista doProductTable. No entanto, se este cabeçalho se tornar complexo (por exemplo, se você adicionar ordenação), pode movê-lo para seu próprio componenteProductTableHeader.

Agora que você identificou os componentes no mockup, organize-os em uma hierarquia. Componentes que aparecem dentro de outro componente no mockup devem aparecer como um filho na hierarquia:

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

Passo 2: Construa uma versão estática em React

Agora que você tem sua hierarquia de componentes, é hora de implementar seu aplicativo. A abordagem mais direta é construir uma versão que renderiza a UI a partir do seu modelo de dados sem adicionar nenhuma interatividade... ainda! Geralmente é mais fácil construir a versão estática primeiro e adicionar a interatividade depois. Construir uma versão estática requer muita digitação e pouco pensamento, mas adicionar interatividade requer muito pensamento e pouca digitação.

Para construir uma versão estática do seu aplicativo que renderiza seu modelo de dados, você vai querer construircomponentesque reutilizam outros componentes e passam dados usandoprops.Props são uma forma de passar dados do pai para o filho. (Se você estiver familiarizado com o conceito deestado, não use estado de forma alguma para construir esta versão estática. O estado é reservado apenas para interatividade, ou seja, dados que mudam ao longo do tempo. Como esta é uma versão estática do aplicativo, você não precisa dele.)

Você pode construir "de cima para baixo", começando com a construção dos componentes mais altos na hierarquia (comoFilterableProductTable) ou "de baixo para cima", trabalhando a partir dos componentes mais baixos (comoProductRow). Em exemplos mais simples, geralmente é mais fácil ir de cima para baixo, e em projetos maiores, é mais fácil ir de baixo para cima.

(Se este código parecer intimidante, passe primeiro peloGuia Rápido!)

Depois de construir seus componentes, você terá uma biblioteca de componentes reutilizáveis que renderizam seu modelo de dados. Como este é um aplicativo estático, os componentes apenas retornarão JSX. O componente no topo da hierarquia (FilterableProductTable) receberá seu modelo de dados como uma prop. Isso é chamado defluxo de dados unidirecionalporque os dados fluem do componente de nível superior para aqueles na parte inferior da árvore.

Etapa 3: Encontre a representação mínima, mas completa, do estado da UI

Para tornar a UI interativa, você precisa permitir que os usuários alterem seu modelo de dados subjacente. Você usaráestadopara isso.

Pense no estado como o conjunto mínimo de dados em mudança que seu aplicativo precisa lembrar. O princípio mais importante para estruturar o estado é mantê-loDRY (Não Se Repita).Descubra a representação absoluta mínima do estado que seu aplicativo precisa e calcule todo o resto sob demanda. Por exemplo, se você está construindo uma lista de compras, pode armazenar os itens como um array no estado. Se você também quiser exibir o número de itens na lista, não armazene o número de itens como outro valor de estado—em vez disso, leia o comprimento do seu array.

Agora pense em todas as partes de dados neste aplicativo de exemplo:

1. A lista original de produtos
2. O texto de pesquisa que o usuário inseriu
3. O valor da caixa de seleção
4. A lista filtrada de produtos

Quais destes são estado? Identifique aqueles que não são:

• Elepermanece inalteradoao longo do tempo? Se sim, não é estado.
• Ele épassado de um paivia props? Se sim, não é estado.
• Você pode calculá-locom base no estado ou props existentes em seu componente? Se sim, eledefinitivamentenão é estado!

O que sobra provavelmente é estado.

Vamos passar por eles um por um novamente:

1. A lista original de produtos épassada como props, então não é estado.
2. O texto de pesquisa parece ser estado, pois muda ao longo do tempo e não pode ser calculado a partir de nada.
3. O valor da caixa de seleção parece ser estado, pois muda ao longo do tempo e não pode ser calculado a partir de nada.
4. A lista filtrada de produtosnão é estado porque pode ser calculadapegando a lista original de produtos e filtrando-a de acordo com o texto de pesquisa e o valor da caixa de seleção.

Isso significa que apenas o texto de pesquisa e o valor da caixa de seleção são estado! Muito bem!

Passo 4: Identifique onde seu estado deve viver

Após identificar os dados de estado mínimos do seu aplicativo, você precisa identificar qual componente é responsável por alterar esse estado, oupossuio estado. Lembre-se: o React usa fluxo de dados unidirecional, passando dados pela hierarquia de componentes de pai para filho. Pode não ficar imediatamente claro qual componente deve possuir qual estado. Isso pode ser desafiador se você é novo nesse conceito, mas você pode descobrir seguindo estes passos!

Para cada pedaço de estado em sua aplicação:

1. Identifiquetodosos componentes que renderizam algo baseado nesse estado.
2. Encontre seu componente pai comum mais próximo—um componente acima de todos eles na hierarquia.
3. Decida onde o estado deve viver:
   1. Frequentemente, você pode colocar o estado diretamente em seu pai comum.
   2. Você também pode colocar o estado em algum componente acima de seu pai comum.
   3. Se você não conseguir encontrar um componente onde faça sentido possuir o estado, crie um novo componente apenas para manter o estado e adicione-o em algum lugar da hierarquia acima do componente pai comum.

No passo anterior, você encontrou dois pedaços de estado nesta aplicação: o texto da busca e o valor da caixa de seleção. Neste exemplo, eles sempre aparecem juntos, então faz sentido colocá-los no mesmo lugar.

Agora vamos percorrer nossa estratégia para eles:

1. Identifique componentes que usam estado:
   • ProductTableprecisa filtrar a lista de produtos com base nesse estado (texto da busca e valor da caixa de seleção).
   • SearchBarprecisa exibir esse estado (texto da busca e valor da caixa de seleção).
2. Encontre seu pai comum:O primeiro componente pai que ambos os componentes compartilham éFilterableProductTable.
3. Decida onde o estado vive: Manteremos os valores do texto do filtro e do estado da caixa de seleção emFilterableProductTable.

Portanto, os valores do estado viverão emFilterableProductTable.

Adicione estado ao componente com oHook useState().Hooks são funções especiais que permitem que você "se conecte" ao React. Adicione duas variáveis de estado no topo deFilterableProductTablee especifique seu estado inicial:

Em seguida, passefilterText e inStockOnlyparaProductTable e SearchBarcomo props:

Você pode começar a ver como sua aplicação se comportará. Edite o valor inicial defilterText de useState('')parauseState('fruit')no código do sandbox abaixo. Você verá tanto o texto da busca quanto a tabela serem atualizados:

Observe que editar o formulário ainda não funciona. Há um erro no console na sandbox acima explicando o porquê:

Na sandbox acima,ProductTable e SearchBarleem as propsfilterText e inStockOnlypara renderizar a tabela, a entrada e a caixa de seleção. Por exemplo, veja comoSearchBarpreenche o valor da entrada:

No entanto, você ainda não adicionou nenhum código para responder às ações do usuário, como digitar. Este será o seu passo final.

Passo 5: Adicionar fluxo de dados inverso

Atualmente, seu aplicativo renderiza corretamente com props e estado fluindo pela hierarquia. Mas para alterar o estado de acordo com a entrada do usuário, você precisará suportar o fluxo de dados no sentido oposto: os componentes de formulário profundos na hierarquia precisam atualizar o estado emFilterableProductTable.

O React torna esse fluxo de dados explícito, mas requer um pouco mais de digitação do que a vinculação de dados bidirecional. Se você tentar digitar ou marcar a caixa no exemplo acima, verá que o React ignora sua entrada. Isso é intencional. Ao escrever<input value={filterText} />, você definiu a propvalue do inputpara ser sempre igual ao estadofilterTextpassado deFilterableProductTable. Como o estadofilterTextnunca é definido, a entrada nunca muda.

Você quer fazer com que sempre que o usuário alterar as entradas do formulário, o estado seja atualizado para refletir essas alterações. O estado é de propriedade deFilterableProductTable, portanto, apenas ele pode chamarsetFilterText e setInStockOnly. Para permitir queSearchBaratualize o estado deFilterableProductTable, você precisa passar essas funções paraSearchBar:

Dentro doSearchBar, você adicionará os manipuladores de eventosonChangee definirá o estado pai a partir deles:

Agora o aplicativo funciona completamente!

Você pode aprender tudo sobre como lidar com eventos e atualizar o estado na seçãoAdicionando Interatividade.

Para onde ir a partir daqui

Esta foi uma introdução muito breve sobre como pensar na construção de componentes e aplicações com React. Você podeiniciar um projeto Reactagora mesmo ouaprofundar-se em toda a sintaxeusada neste tutorial.