Projeto React na Prática: Evoluindo um Catálogo de Produtos

Neste artigo vamos continuar a evolução do nosso Projeto Integrador — Catálogo de Produtos, desenvolvido com React no Front-end e Node.js + Express no Back-end.

Na primeira etapa construímos a estrutura do projeto e realizamos a integração entre Front-end e Back-end através de uma API REST.

Agora vamos evoluir a aplicação adicionando novas funcionalidades ao Front-end com React.

Nesta etapa implementamos:

• validação do formulário;
• contador automático de produtos;
• busca de produtos;
• filtro utilizando filter();
• melhorias nos cards;
• componente Footer;
• melhorias no CSS e na organização da interface.

A proposta é simples: em vez de começar outro projeto do zero, vamos aprender a evoluir uma aplicação que já funciona.

---

Evoluindo o Front-end com React

Uma das partes importantes do desenvolvimento de sistemas é perceber que um projeto não termina quando a primeira versão funciona.

Depois da estrutura inicial, começam a surgir novas necessidades.

No nosso Catálogo de Produtos, por exemplo, o usuário já conseguia cadastrar e visualizar produtos.

Mas ainda poderíamos melhorar bastante a aplicação.

Uma das primeiras mudanças foi a validação do formulário.

Agora não permitimos o cadastro de produtos sem nome ou com preço igual ou menor que zero.

Além de evitar dados incorretos, a aplicação também apresenta uma mensagem para orientar o usuário.

---

Contador automático de produtos

Outra funcionalidade adicionada foi um contador.

Como os produtos já estão armazenados em um array, podemos utilizar a propriedade length:

produtos.length

Assim conseguimos mostrar automaticamente a quantidade de produtos cadastrados.

Por exemplo:

<p>Total de produtos: {produtos.length}</p>

Quando a lista muda, o React atualiza a interface e o contador acompanha essa alteração.

É uma implementação simples, mas demonstra muito bem como podemos utilizar os próprios dados da aplicação para atualizar a interface.

---

Busca de produtos com filter()

Uma das principais evoluções desta versão foi a criação de uma busca de produtos pelo nome.

Para isso utilizamos o método filter() do JavaScript.

A ideia principal é filtrar o array original e gerar uma lista contendo somente os produtos correspondentes ao texto pesquisado.

constprodutosFiltrados=produtos.filter((produto) =>produto.nome.toLowerCase().includes(busca.toLowerCase()));

Nesse pequeno trecho estamos utilizando três conceitos importantes:

filter() percorre o array e seleciona os elementos que atendem à condição.

includes() verifica se determinado texto está presente no nome do produto.

toLowerCase() transforma os textos em letras minúsculas, evitando problemas na busca por causa de letras maiúsculas ou minúsculas.

Assim, se tivermos:

Mouse GamerTeclado MecânicoMonitor

e pesquisarmos:

mouse

a aplicação poderá exibir somente o produto correspondente.

Esse é um ótimo exemplo de como conceitos simples de JavaScript podem ser utilizados para criar uma funcionalidade real dentro de um projeto React.

---

Melhorando a interface do projeto

Também aproveitamos esta evolução para melhorar bastante o visual da aplicação.

Organizamos melhor:

• formulário;
• campo de busca;
• contador;
• cards dos produtos;
• mensagens;
• Footer;
• responsividade.

Além de funcionar corretamente, uma aplicação também precisa apresentar as informações de forma clara para o usuário.

Por isso, CSS e organização da interface também fazem parte da evolução de um projeto Front-end.

---

Programação é evolução

Um ponto importante desta aula é entender que aprender programação não significa apenas conhecer comandos isoladamente.

Você pode conhecer:

ifarraysobjetosfunçõesmap()filter()

mas o aprendizado começa a ganhar outra dimensão quando precisamos juntar esses conceitos para resolver um problema.

No nosso projeto, por exemplo, utilizamos estado, eventos, arrays, funções e filter() para criar uma busca de produtos.

É por isso que desenvolver projetos é tão importante.

Primeiro fazemos funcionar.

Depois testamos.

Corrigimos problemas.

Adicionamos funcionalidades.

Melhoramos a interface.

E continuamos evoluindo.

---

Assista à aula completa

Toda a evolução do Front-end foi desenvolvida passo a passo durante uma live no canal Desvendando o Código.

Na aula você poderá acompanhar a implementação, os testes e o processo de evolução do projeto.

---

Código atualizado no GitHub

O projeto completo e atualizado está disponível no GitHub.

No repositório você encontrará o Front-end desenvolvido com React e o Back-end com Node.js e Express.

https://github.com/marcoscaldas/Projeto_Catalogo_Produtos_PW2_DSI.git

Você pode utilizar o código para acompanhar a aula, estudar a estrutura do projeto e desenvolver suas próprias melhorias.

---

Front-end e Back-end trabalhando juntos

Apesar de nesta etapa nosso foco estar no React, o Catálogo de Produtos continua sendo um projeto integrado.

A estrutura permanece:

ReactFront-end   ↓API REST   ↓Node.js + ExpressBack-end

O Front-end é responsável pela interface e interação com o usuário, enquanto o Back-end disponibiliza os dados através da API.

Essa separação permite entender na prática como diferentes partes de uma aplicação Web trabalham juntas.

---

Próxima etapa: evolução do Back-end

Nesta aula evoluímos o Front-end do Catálogo de Produtos.

Na próxima etapa vamos continuar o mesmo projeto, mas voltando nossa atenção para o Back-end com Node.js e Express.

Assim, o projeto continua evoluindo dos dois lados:

React → Front-end

Node.js + Express → Back-end

Em vez de estudar tecnologias isoladamente, conseguimos visualizar como elas são utilizadas na construção de uma aplicação completa.

---

Conclusão

Nesta etapa nosso Catálogo de Produtos ganhou validação, contador automático, busca com filter(), melhorias nos cards e uma nova interface.

Mais importante do que adicionar funcionalidades é entender o processo.

Um projeto não precisa nascer completo.

Podemos começar com uma versão simples e evoluí-la gradualmente conforme aprendemos novos conceitos e identificamos novas necessidades.

Programação é justamente isso: construir, testar, corrigir e evoluir.