Como criar um front-end em React e um back-end em Node/Express e conectá-los

Artigo original: https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/

Escrito por: João Henrique

Neste artigo, examinarei com vocês o processo de criação de uma aplicação simples em React e a conexão dela com uma API simples em Node/Express que também criaremos.

Não entrarei em muitos detalhes sobre como trabalhar com qualquer uma das tecnologias que mencionarei neste tutorial, mas deixarei links, caso você queira aprender mais.

Você encontrará o código inteiro neste repositório que eu fiz para o tutorial.

O objetivo aqui é dar a você um guia prático sobre como configurar e conectar o client de front-end com a API do back-end.

Antes de botar a mão na massa, certifique-se de ter o Node.js em sua máquina.

Crie o diretório principal do projeto

No seu terminal, navegue até o diretório onde deseja salvar seu projeto. Agora, crie um diretório para seu projeto e entre nele:

mkdir meu_projeto_incrivel
cd meu_projeto_incrivel

Crie uma aplicação em React

Este processo é bem direto ao ponto.

Usarei aqui o create-react-app da Meta para… isso, você adivinhou, criar com facilidade uma aplicação em React chamada client:

npx create-react-app client
cd client
npm start

Vejamos agora o que eu fiz:

1. Usei o npx do npm para criar uma aplicação em React e dei a ela o nome de client.
2. Usei cd (change directory, ou alterar diretório) para entrar no diretório client.
3. Iniciei a aplicação.

No seu navegador, vá para http://localhost:3000/.

Se tudo estiver certo, você verá a página de boas-vindas do React. Parabéns! Isso significa que você agora tem uma aplicação básica em React em execução na sua máquina local. Fácil, não?

Para interromper sua aplicação em React, basta pressionar Ctrl + c no seu terminal.

Crie uma aplicação em Express

Ok, esta parte será direta como o exemplo anterior. Não se esqueça de navegar até a pasta superior do projeto.

Usarei o Express Application Generator para criar rapidamente o esqueleto de uma aplicação e dar a ela o nome de api:

npx express-generator api
cd api
npm install
npm start

Vamos ver o que eu diz:

1. Usei o npx do npm para instalar o express-generator globalmente.
2. Usei o express-generator para criar uma aplicação do Express e dei a ela o nome de api.
3. Usei cd para entrar no diretório API.
4. Instalei todas as dependências.
5. Iniciei a aplicação.

No seu navegador, vá até http://localhost:3000/.

Se tudo estiver certo, você verá a página de boas-vindas do express. Parabéns! Isso significa que você tem uma aplicação básica em Express em execução em sua máquina local. Fácil, não?

Para interromper sua aplicação do Express, basta pressionar Ctrl + c em seu terminal.

Configuração de uma nova rota na API do Express

Certo, hora de botar a mão na massa. É o momento de abrir seu editor de código favorito (eu uso o VS Code) e de navegar até a pasta do seu projeto.

Se você nomeou a aplicação em React como client e a aplicação do Express como api, você encontrará duas pastas principais: client e api.

1. Dentro do diretório API, vá para bin/www e altere o número da porta na linha 15 de 3000 para 9000. Executaremos as duas aplicações ao mesmo tempo mais tarde. Fazendo isso, evitaremos problemas. O resultado deverá ser algo assim:

2. Em api/routes, crie um arquivo testAPI.js e cole nele este código:

var express = require(“express”);
var router = express.Router();

router.get(“/”, function(req, res, next) {
    res.send(“A API está funcionando corretamente”);
});

module.exports = router;

3. No arquivo api/app.js, insira uma nova rota na linha 25:

app.use("/testAPI", testAPIRouter);

4. Certo, você está “informando” o Express que ele deve usar essa rota. Você, contudo,  ainda precisa solicitá-la. Faremos isso na linha 9:

var testAPIRouter = require("./routes/testAPI");

As únicas alterações são nas linhas 9 e 25. No fim, esta deve ser a aparência:

5. Parabéns! Você criou uma nova rota (texto em inglês).

Se você iniciar sua aplicação da API (em seu terminal, navegue até o diretório API e execute “npm start”) e for até http://localhost:9000/testAPI em seu navegador, verá a mensagem: A API está funcionando corretamente.

Conectando o client em React à API do Express

1. Em seu editor de código, vamos trabalhar no diretório client. Abra o arquivo app.js, que se encontra em meu_projeto_incrivel/client/app.js.
2. Aqui, usarei a Fetch API para obter dados da API. Basta colar este código após a declaração da classe e antes do método render:

constructor(props) {
    super(props);
    this.state = { apiResponse: "" };
}

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

componentWillMount() {
    this.callAPI();
}

3. Dentro do método render, você encontrará uma tag <p>. Vamos alterá-la para que renderize apiResponse:

<p className="App-intro">;{this.state.apiResponse}</p>

No final, o arquivo terá a seguinte aparência:

É, eu sei!!! Muita informação! O copiar e colar é um bom auxílio, mas você precisa entender o que está fazendo. Vamos ver o que eu fiz aqui:

1. Nas linhas 6 a 9, inserimos um construtor, que inicializa o state padrão.
2. Nas linhas 11 a 16, inserimos o método callAPI(), que fará o fetch dos dados da API e armazenará a resposta em this.state.apiResponse.
3. Nas linhas 18 a 20, inserimos um método do ciclo de vida do React, chamado componentDidMount(). Sua função será executar o método callAPI() após a montagem do componente.
4. Por fim, na linha 29, usei a tag <p> para exibir um parágrafo na página do nosso client, com o texto que obtivemos a partir da API.

Mas o que é esse tal de CORS?

Beleza! Estamos quase prontos. Porém, se começarmos as duas aplicações (client e API) e se navegarmos até http://localhost:3000/, você ainda não encontrará o resultado esperado sendo exibido na página. Se abrir as ferramentas de desenvolvimento do Chrome, saberá o motivo. No console, você verá o erro a seguir:

Failed to load http://localhost:9000/testAPI: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Tradução: "Não foi possível carregar http://localhost:9000/testAPI: O cabeçalho 'Access-Control-Allow-Origin' (algo como 'controle de acesso e permissão da origem') não está presente no recurso solicitado. A origem, 'http://localhost:3000', portanto, não tem o acesso permitido. Se uma resposta 'opaca' serve às suas necessidades, defina o modo da solicitação como 'no-cors' para obter o recurso com o CORS desativado."

Isso é simples de se resolver. Temos apenas de adicionar o CORS à nossa API para permitir solicitações entre origens. Vamos fazer isso. Confira este link da MDN para saber mais sobre o CORS.

1. No seu terminal, navegue até o diretório API e instale o pacote CORS:

npm install --save cors

2. No seu editor de código, vá até o diretório API e abra o arquivo meu_projeto_incrivel/api/app.js.

3. Na linha 6, solicite o CORS:

var cors = require("cors");

4. Agora, na linha 18, “informe” o Express que ele deve usar o CORS:

app.use(cors());

O arquivo da API app.js deve terminar assim:

Ótimo. Tudo certo!!

Ok! Agora, estamos prontos!

Agora, inicie as duas aplicações (client e API), em dois terminais diferentes, usando o comando npm start.

Se você navegar até o endereço http://localhost:3000/, verá no navegador algo assim:

Claro que este projeto, por si só, não faz muita coisa, mas é o início de uma aplicação Full Stack. Você pode encontrar o código completo neste repositório que eu criei para o tutorial.

Em breve, farei alguns tutoriais complementares, como, por exemplo, como conectar com um banco de dados do MongoDB e como executá-lo dentro de contêineres do Docker.

Como diria um bom amigo:

Seja forte e siga programando!!!

…e não se esqueça de ser incrível hoje ;)