React do Zero para Iniciantes: Aprenda Criando um Projeto Completo

Se você está começando a estudar React e ainda tem dificuldade para entender componentes, Props, estados ou como uma aplicação React se comunica com uma API, aprender através de um projeto prático pode tornar esses conceitos muito mais fáceis de visualizar.

Neste tutorial vamos desenvolver um Catálogo de Produtos com React, construindo o projeto passo a passo e entendendo o papel de cada parte da aplicação.

A ideia não é simplesmente copiar código pronto. O objetivo é compreender como o React funciona na prática e como os diferentes conceitos se conectam dentro de um projeto real.

O que vamos criar com React?

O projeto será um Catálogo de Produtos.

A aplicação possui um formulário para cadastrar novos produtos e uma área responsável por apresentar os produtos disponíveis.

Durante o desenvolvimento trabalharemos com conceitos importantes do React, como:

• componentes;
• JSX;
• Props;
• useState;
• eventos;
• formulários;
• renderização de listas;
• map();
• key;
• useEffect;
• fetch();
• async e await;
• consumo de API;
• atualização de estado.

Mesmo sendo um projeto relativamente simples, ele permite entender vários conceitos que aparecem constantemente no desenvolvimento de aplicações React.

Por que aprender React criando projetos?

Quando estamos começando, estudar cada recurso isoladamente pode dificultar a compreensão.

Você aprende useState em um exemplo, Props em outro, useEffect em outro e depois surge a dúvida:

como tudo isso funciona junto em uma aplicação?

É justamente por isso que utilizaremos um projeto.

Em vez de estudar apenas a sintaxe, conseguimos enxergar o papel de cada recurso dentro de uma aplicação funcionando.

Componentes no React

Uma das principais características do React é a possibilidade de dividir uma interface em componentes.

Em nosso Catálogo de Produtos, podemos separar responsabilidades em componentes diferentes.

Por exemplo:

App
│
├── FormProduto
│
└── ListaProdutos
       │
       └── Produto

Cada componente possui uma responsabilidade.

O formulário cuida da entrada das informações, a lista organiza os produtos e o componente de produto representa cada item apresentado na tela.

Essa divisão ajuda a manter o projeto mais organizado e facilita sua evolução.

O que são Props no React?

Os componentes frequentemente precisam trocar informações.

Para isso, podemos utilizar as Props.

Uma propriedade pode ser enviada por um componente e recebida por outro, permitindo reutilizar componentes com informações diferentes.

No nosso projeto, isso será importante para que os dados dos produtos possam chegar aos componentes responsáveis por apresentá-los na interface.

Trabalhando com useState

Outro conceito fundamental é o estado.

Com o Hook useState, podemos armazenar informações que podem mudar durante a utilização da aplicação.

Um exemplo simples seria:

const [nome, setNome] = useState("");

Temos o valor atual armazenado em nome e uma função setNome utilizada para atualizar esse valor.

No projeto utilizamos esse conceito nos campos do formulário e também no gerenciamento dos produtos.

Renderizando listas com map()

Quando temos vários produtos, não faz sentido escrever manualmente um componente para cada um.

Podemos percorrer o array utilizando map():

produtos.map((produto) => (
    <Produto
        key={produto.id}
        produto={produto}
    />
))

Dessa forma, o React consegue gerar os componentes dinamicamente a partir dos dados existentes.

Aqui também aparece outro conceito importante: a propriedade key, utilizada pelo React para identificar os elementos de uma lista.

Para que serve o useEffect?

Em determinado momento precisamos carregar os produtos quando o componente é apresentado.

É aí que entra o useEffect.

Para quem está começando, uma maneira simples de visualizá-lo é pensar inicialmente em um gatilho para executar determinada ação em um momento do ciclo do componente.

Por exemplo:

useEffect(() => {
    carregarProdutos();
}, []);

Nesse caso, utilizamos o useEffect para iniciar o carregamento dos produtos.

Consumindo uma API com React

Nosso front-end não precisa trabalhar apenas com dados criados dentro do próprio React.

Ele também pode se comunicar com um back-end.

Para realizar uma requisição podemos utilizar fetch():

const resposta = await fetch("/api/produtos");
const dados = await resposta.json();

setProdutos(dados);

Aqui começamos a enxergar uma arquitetura muito comum em aplicações web:

REACT
  ↓
requisição HTTP
  ↓
API / BACK-END
  ↓
dados
  ↓
REACT
  ↓
INTERFACE

O React fica responsável pela interface e interação com o usuário, enquanto o back-end será responsável por receber requisições e fornecer os dados necessários para a aplicação.

Cadastrando produtos na API

Também podemos realizar o caminho contrário.

Quando o usuário preencher o formulário, o React pode enviar essas informações para o back-end através de uma requisição POST.

Isso permite compreender que fetch() não serve apenas para buscar informações.

Uma aplicação front-end pode consultar, enviar, alterar e excluir dados através de uma API.

Essa comunicação entre front-end e back-end será aprofundada na continuação deste projeto.

Teste seu código durante o desenvolvimento

Uma prática importante apresentada durante o projeto é desenvolver em pequenas etapas.

Crie uma parte.

Execute.

Observe o resultado.

Corrija os problemas.

Depois continue.

Deixar para testar somente quando todo o projeto estiver pronto pode dificultar bastante a identificação de erros.

Programação é processo.

Quanto melhor você compreender cada etapa, mais fácil será evoluir para projetos maiores.

Aula completa — React do Zero para Iniciantes

Na aula abaixo desenvolvemos o projeto passo a passo, explicando os conceitos durante a construção da aplicação.

Próximo passo: o back-end

Este projeto não termina no React.

Na próxima etapa vamos trabalhar o back-end do Catálogo de Produtos utilizando Node.js e Express.

Assim começamos a enxergar as duas partes trabalhando juntas:

React → Front-end

Node.js + Express → Back-end

A proposta é evoluir gradualmente, acrescentando novos conceitos conforme os projetos avançam.