Como criar um app React consumindo um back-end Node com 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:

Se você gostou, se inscreva no nosso canal para receber as novidades!

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:

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:

Não esqueça de executar o npm install para instalar as dependências!
Simples API para responder ao endpoint /api/mensagem

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/"

Executando o projeto

Para ver a magia acontecer, digite no seu terminal:

npm run dev

Referências


Gostou? Recomende 👏 este artigo, comente, acompanhe nossa publicação e compartilhe!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.brFacebook, Twitter, Youtube


Aprenda mais com nossos cursos de programação online!

ECMAScript 6ECMAScript 7 e 8React 16VS CodeMais

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Diego Martins de Pinho

Written by

Desenvolvedor de Software, Fundador da CodePrestige e autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia