Como criar um app React consumindo um back-end Node com Express
Se você já usou o React, provavelmente em algum momento se perguntou se é possível criar, dentro do mesmo projeto, o front-end com ele e ao mesmo tempo consumir uma API em Node. É possível e o processo é mais simples do que parece.
Para este projeto, vamos utilizar o create-react-app e o Express.
Versão em Vídeo
Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos neste vídeo abaixo:
Criando a base do projeto
O primeiro passo é criar o seu projeto React utilizando o pacote create-react-app (se você ainda não o conhece, clique aqui). Para isso, basta digitar o seguinte comando no terminal:
create-react-app node-react
A ferramenta do Facebook vai criar todo o código base para o projeto em React funcionar. Isso pode levar alguns minutos. Feito isso, entre na raiz do projeto, crie uma pasta chamada /client e mova todo o código gerado para dentro dela.
O back-end com Express
Na raiz do projeto, junto a pasta /client que desenvolvemos no passo anterior, crie um novo arquivo chamado package.json (o ponto de partida de qualquer projeto NodeJS). Nele, copie o seguinte conteúdo:
Aqui usaremos o pacote concurrently para rodar a aplicação React e o servidor ao mesmo tempo. Agora, crie um arquivo chamado server.js e insira o seguinte conteúdo:
Este código é uma simples API REST utilizando o Express. Em resumo, ele cria um endpoint em /api/mensagem e retorna uma simples mensagem “Hello from Express”. Iremos consumir esta API lá no front-end que já deixamos preparado.
Consumindo a API
Agora que já cuidamos da API, vamos retornar ao diretório /client. No arquivo package.json gerado pelo create-react-app, adicione a seguinte linha:
"proxy": "http://localhost:5000/"Este é a chave para fazer tudo funcionar. Este comando diz a aplicação para jogar as requests da API para o nosso próprio servidor. Para ver a magia acontecer, basta alterar o arquivo App.js para fazer a chamada:
Aqui utilizamos o state e o componentDidMount para administrar a resposta da API dentro do nosso componente. Reparem que na chamada pra API, só definimos o caminho parcial (/api/mensagem). Não é preciso definir o caminho completo exatamente por causa da linha proxy que inserimos no passo anterior.
Executando o projeto
Para ver a magia acontecer, digite no seu terminal:
npm run devIsso irá subir a aplicação React e o servidor ao mesmo tempo. Basta entrar na página principal da aplicação para ver que está tudo funcionando como esperado!
Bem bacana, não é mesmo? Em um próximo artigo, vamos discutir como configurar este setup para criar uma versão de produção deste projeto!
Referências
Aprenda mais com nossos cursos de programação online!
ECMAScript 6 • ECMAScript 7 e 8 • React 16 • VS Code • Mais
