Uma barra de pesquisa ajuda a filtrar o que é necessário e encontrar o resultado desejado para o usuário.
Você pode estar pensando, existem várias bibliotecas do React que podem ajudar você configura um componente de pesquisa em segundos-por que desperdiçar seu tempo escrevendo um monte de linhas para criar algo que já existe?
Ou talvez você esteja se perguntando por que nem sempre é a melhor ideia usar uma biblioteca para implementar uma barra de pesquisa em seu projeto. Aqui estão algumas idéias sobre isso.
Abaixo está um relatório detalhado de um pacote popular no npm.
Fonte: BundlePhobia
Mesmo se considerarmos a versão reduzida da biblioteca, é muito grande para incluir em um projeto. Nosso código abaixo tem cerca de 746 bytes, o que é muito menos do que qualquer biblioteca por aí!
Outra vantagem de criar uma barra de pesquisa do zero é que ela é muito mais personalizável do que as bibliotecas. Não importa quantas bibliotecas você use em um projeto, de gerenciamento de estado a componentes, o básico ainda é muito importante para um desenvolvedor saber.
Neste tutorial, tentaremos replicar uma barra de pesquisa que rastreia quaisquer alterações no campo de entrada e filtra os dados presentes no site. Mais especificamente, construiremos uma barra de pesquisa que filtra as postagens do blog por seus títulos.
Aqui está o que cobriremos neste artigo:
Configurando os arquivos iniciais Gerando dados fictícios para a barra de pesquisa Exibindo os dados fictícios Estilo da barra de pesquisa Criação a barra de pesquisa funcional
Configurando os arquivos iniciais
Vá em frente e inicialize um novo projeto React usando Criar aplicativo React .
npx create-react-app search-bar-tutorial
Vá até o arquivo raiz e remova todos os arquivos desnecessários.
Abra o arquivo App.js e limpe os elementos JSX brutos.
Agora, crie um campo de entrada para o usuário inserir a consulta.
exportar a função padrão App () {return {
}}
Gerando dados fictícios para a barra de pesquisa
A seguir, vamos criar alguns dados fictícios para a barra de pesquisa filtrar. Você pode criar seus próprios dados fictícios ou simplesmente acessar Mockaroo e gerar alguns dados fictícios facilmente.
Vá em frente e insira os campos de que você precisa nos dados fictícios.
O número de linhas que você cria deve ser basicamente o mesmo número de objetos que você recebe nos dados fictícios, então será melhor se você reduzir o número do padrão de 1000. Certifique-se de definir o tipo de arquivo para JSON.
Clique em Visualizar e copie todos seus dados simulados em seu editor de código.
Crie um arquivo separado-vamos chamá-lo de mock-data.json-e passado e os dados gerados. O arquivo JSON terá a seguinte aparência:
Exibindo os dados fictícios
Agora, antes de tornar a barra de pesquisa funcional, vamos mapear todos os dados e exibir no aplicativo.
Importe os dados JSON, assim:
import Data from”../mock-data.json”
Como os dados fictícios são uma matriz, nós’Vou usar a função JavaScript ES6 Map para percorrer cada objeto na matriz e exibi-lo usando JSX.
{Data.map ((post)=> (
{ post.title}
{post.author}
)); }
É assim que vai acabar:
Estilizando a barra de pesquisa
O estilo não é necessário, mas qual é a diversão sem CSS? Sinta-se à vontade para pular para a próxima seção se você for bom em demonstrações de estilo.
Vamos tentar centralizar cada elemento, incluindo a barra de pesquisa. O elemento pai tem um nome de classe de app e, portanto, vamos direcioná-lo para centralizar tudo.
No arquivo styles.css, direcione o nome da classe.app e aplique a propriedade flex.
.app {display: flex; direção flexível: coluna; justificar o conteúdo: centro; alinhar-itens: centro; }
As postagens ainda parecem chatas. Vamos fazer um cartão para cada postagem. Atribua um nome de classe ao elemento JSX na função Map.
//App.js {Data.map ((post)=> (
{post.title}
{post.author}
)); }
Para tornar cada cartão distinguível, usaremos a propriedade border e arredondaremos os cantos.
/* App.css */.box {text-align: left; borda: cume preto 1px; raio da borda: 10px; margem: 3px; largura: 20rem; padding-left: 10px; }
Com o estilo feito, vamos agora voltar ao foco principal do tutorial-tornar a barra de pesquisa funcional!
Tornar a barra de pesquisa funcional
Agora para a parte interessante! Queremos rastrear cada alteração sempre que o usuário digitar no campo de entrada. Para isso, usamos o useState Hook e definimos o estado sempre que houver um alteração no campo de entrada.
importar dados de”../mock-data.json”; import {useState} de”react”; exportar função padrão App () {const [query, setQuery]=useState (“”) return {
{post.title}
{post.author}
} )}
}}
Feito isso, a próxima coisa que queremos fazer é ver se a consulta inserida corresponde a algum dos dados fictícios. Em nosso exemplo, veremos se o título da postagem corresponde à consulta inserida. Esta abordagem suportará correspondência parcial e idêntica.
Em termos mais básicos, se o usuário inserir uma única letra, a função retornará todos os títulos de postagem que incluirão essa letra. Da mesma forma, se o usuário inserir uma palavra válida, a função de pesquisa retornará um array contendo títulos de post que contenham essa palavra.
O método Filter é perfeito neste cenário. Ele retorna uma matriz que satisfaz a condição especificada-a condição aqui seria retornar uma nova matriz que corresponda ao que o usuário inseriu.
Data.filter (post=> {if (query===””) {//se a consulta estiver vazia, retornar a postagem;} else if (post.title.toLowerCase (). includes (query.toLowerCase ())) {//retorna a matriz filtrada retornar a postagem;}});
Vamos ver se entendi. Se o usuário não inseriu nada, podemos dizer que o campo de entrada não está em uso e a função de filtro retornará a matriz original.
Se a consulta inserida corresponder a qualquer um dos dados (em nosso caso, um título de postagem de nosso blog de exemplo), ele retornará uma nova matriz com os objetos que correspondem à consulta inserida pelo usuário. Para evitar erros causados pela capitalização das letras, é melhor converter a consulta inserida pelo usuário e o post.title dos dados fictícios em minúsculas. Dessa forma, não importa o que o usuário insira, mesmo que sejam todas letras minúsculas, nosso filtro ainda será capaz de produzir um resultado correspondente, se for encontrado.
Para exibir os dados filtrados, nós’Vou apenas combiná-lo com nossa função de mapa anterior.
Seu código final deve ser parecido com este:
{Data.filter (post=> {if (query===”) {return post;} else if (data.title.toLowerCase (). includes (query.toLowerCase ())) {return post;}}). map ((post, index)=> (
{post.title}
{post.author}
))}
E é isso! Bom trabalho nessa agitação. A barra de pesquisa deve estar ativa e pronta. 
Conclusão
Agora que você saiba como criar uma barra de pesquisa no React do zero, você pode personalizá-la ainda mais de acordo com os requisitos do projeto. Você pode fazê-lo chamar uma determinada API, bem como exibir os dados de forma semelhante.
Além disso, encontramos algumas funções do JavaScript ES6, que são muito úteis e podem ser usadas para outros aplicativos, como classificação de dados filtrados para exibir os dados de acordo com a ordem desejada (data, ordem alfabética, hora etc.) usando a função sort ().
Em última análise, a maior vantagem de criar do zero é definitivamente a flexibilidade do componente em comparação com outros pacotes de terceiros lá fora. O que você fará com que sua barra de pesquisa faça?
