Tutorial Listagem com Busca em ReactJS

No tutorial de hoje eu quero lhe ensinar como criar uma tela de listagem de itens em ReactJS que, além de listar os itens usando Componentes, vamos criar uma caixa de pesquisa para filtrar os itens da listagem.

Caso seja seu primeiro contato com ReactJS, não recomendo começar com este tutorial. Ao invés disso, comece com este aqui.

Vamos lá!

#1 – Criando o projeto

Vamos começar criando o nosso projeto usando o create-react-app, para ganharmos tempo.

Aguarde alguns minutos até a criação do projeto terminar e assim que isso acontecer, vamos instalar uma dependência que eu gosto bastante que é a React Bootstrap. Com ela, fica muito mais fácil de estilizar nossos projetos.

Para que os estilos do Bootstrap passem a valer, você deve incluir o import do CSS abaixo no seu index.js

Também usaremos Styled Components, que é uma dependência que permite criar micro-frontends ou interfaces componentizadas muito mais facilmente.

Nosso projeto será uma listagem de livros, mas você pode adaptá-lo para qualquer realidade, apenas modificando o HTML.

Ele terá uma única página, mas com duas áreas distintas: um cabeçalho, com a barra de busca, que vamos fazer com um componente, e um botão para novo item e a listagem em si. Esta listagem será criada através da repetição de outro componente que criaremos também.

Para deixar o seu projeto rodando, use o comando abaixo.

Deve executar a aplicação React padrão, que vamos customizar agora.

#2 – Criando o componente de Item

Vamos começar pelo protagonista do nosso tutorial, que é a listagem. No entanto, vamos fazê-la replicando um mesmo componente diversas vezes, então começaremos pelo componente em si, que chamarei de ListItem e que deve ser um novo arquivo ListItem.js na pasta src do projeto.

Para usar este componente, vamos em nosso App.js e vamos incluir nosso componente lá, ao invés do padrão que vem com o create-react-app. Repare que adicionei o componente Container do React Bootstrap também, que é necessário para que as customizações que vamos fazer funcionem mais tarde.

Se você ver agora no navegador, o resultado é bem pífio, mas já demonstra que nosso componente está sendo exibido.

Nossa listagem vai ser de livros, então vamos criar um componente que tenha uma imagem da capa, o título, link e preço do mesmo, o que acha?

Podemos fazer isso em nosso ListItem.js combinando Styled Components com React Bootstrap e o jeito tradicional de criar componentes em React.

Agora voltando ao App.js, modifique o código para colocarmos alguns itens na tela, a fim de ver como ela irá se comportar. Criei um styled component para o container da lista, a fim de fazer com que ela se comporte na horizontal até o fim da tela.

Com isso, sua aplicação deve estar se parecendo com isso, o que mostra mais ou menos como vai ser a nossa listagem.

O próximo passo é tornar o nosso item da lista dinâmico, certo?

#3 – Tornando o item dinâmico

Vamos fazer isso em duas etapas.

Primeiro, vamos fazer com que as props recebidas por nosso componente sejam utilizadas ao invés dos valores literais. Para fazer isso, remova os valores literais e faça chamadas JS às props recebidas na função principal do componente.

E agora, no App.js onde está usando os ListItems, passe as props adequadas a cada um.

O resultado já deve ser visível e bem interessante.

Mas para que essa lista fique dinâmica de verdade, a sua fonte de dados deve ser um estado, que será carregado uma primeira vez com useEffect quando a página se abrir.

Esse useEffect vai precisar que os dados venham de algum lugar, geralmente uma API externa. Como isso foge ao escopo deste tutorial, sendo que aqui no blog você encontra muitos tutoriais de WebAPIs com Node.js, vamos simular com dados mockados. Ainda assim, se quiser estudar consumo de APIs no React, o vídeo abaixo pode te ajudar.

Para isso, crie um BooksService.js junto dos seus outros arquivos, contendo apenas a função abaixo.

Em uma situação real, essa função provavelmente usaria um Axios ou algo do tipo para chamar uma API externa. No nosso caso, ela sempre retornará o mesmo array de livros, ok?

Vamos usá-la em nosso App.js, para carregar nosso state através de um useEffect, que será chamado uma única vez quando a página for carregada.

Repare como usei um map em cima do state de books para carregar vários ListItems, definindo além das propriedades do livro, uma propriedade key que é obrigatória em listagens como essa.

Agora sim a nossa lista está dinâmica!

#4 – Criando o componente de busca

Agora vamos para a parte superior da nossa listagem, onde devemos ter um componente de busca que servirá como filtro para a lista abaixo. Vamos começar criando este componente em um SearchBar.js.

Antes de codificar este componente, vamos instalar algumas dependências relacionadas a ícones, usando a biblioteca Font Awesome para React.

Agora, vamos ao nosso SearchBar.js, apenas com aparência, sem nada de comportamento por enquanto.

Referencie e use este componente no seu App.js para vê-lo em ação.

O resultado, você deve ver como abaixo.

Na próxima e última parte, vamos tornar este componente dinâmico!

#5 – Tornando a busca dinâmica

Você tem duas alternativas aqui, para tornar a busca dinâmica.

A primeira é, conforme o usuário for digitando, você vai filtrando os resultados na lista logo abaixo. A segunda é depois que o usuário terminar de digitar, ele deve teclar Enter ou clicar no ícone de busca, para a lista ser atualizada.

Eu optei pela segunda, para isso você precisa fazer as seguintes alterações no código do SearchBar.js:

• no onChange do input de texto, coloque uma função handleSearchChange;
• no onClick do botão, coloque uma função newBook;
• no onSubmit do form de busca, coloque uma função handleOnSubmit;

Vamos programar estas funções todas agora.

Primeiro, atualize os imports do SearchBar.js

Depois, dentro da function SearchBar, adicione as seguintes funções.

Aqui, temos o state para a busca que o usuário está digitando, que é manipulado através do handleSearchChange, disparado a cada tecla digitada no input de texto, apenas para armazenar a busca.

A função newBook é um detalhe: ela faz o direcionamento para uma página que não temos, para cadastro de um novo livro. Não abordarei essa construção aqui e deixo a seu critério também a mudança de ordenação conforme o select de “mais novos” ou “mais antigos”.

Já a function handleOnSubmit é que faz o trabalho duro de filtrar a listagem, usando um filter padrão do JS e chamando uma função de setBooks que deve vir pelas props, que é algo que vou te explicar com mais calma.

Nossa listagem exibe os livros que estão salvos no state da página, certo? Então, se eu quiser mudar o que está sendo listado, devemos mudar o state. Como esse state foi definido na App.js e não na SearchBar.js, teremos de passar pra barra de busca a função que permite modificar o state, a fim de que todos vejam e manipulem o mesmo state.

Assim sendo, volte ao App.js e modifique a chamada do componente SearchBar para que ele tenha uma props setBooks recebendo a função correspondente, já carregada nesse mesmo arquivo.

Com isso, a função será passada como prop para o interior do componente que, quando for utilizado, vai modificar o state do componente-pai.

O resultado é muito bacana, digite algumas letras presentes em títulos dos livros e dê Enter para ver a lista filtrar instantaneamente.

E com isso, finalizamos este tutorial!

Nos fontes deste tutorial, que você pode baixar no formulário ao final desta página, incluí mais livros mockados, para ficar mais interessante ainda o seu desenvolvimento, além de ter organizado o projeto em pastas, para não ficar tão bagunçado.

Uma dica para te ajudar a construir componentes de UI e até mesmo organizar o design system da aplicação é dar uma estudada em React StoryBook.

Quer aprender a fazer deploy deste projeto na Heroku? Leia este tutorial. Ou então na Digital Ocean? Tem neste tutorial aqui.

Quer aprender a fazer outro projeto bacana e simples como esse? Leia este tutorial!

Qualquer dúvida deixe nos comentários!