Se você já utilizou o React em algum projeto, seja em casa, na faculdade, ou no trabalho, provavelmente já se perguntou se é possível criar, dentro do mesmo projeto, o front-end e o back-end utilizando Node. Isso é, sim, possível e o processo é bem mais simples do que parece.
Para fazer isso, neste exemplo vamos utilizar o create-react-app e o Express.
Criando a base do projeto do React
O primeiro passo é criar o seu projeto React utilizando o pacote create-react-app. 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 Node e Express
Na raiz do projeto, junto à 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:
{
"name": "node-react",
"version": "1.0.0",
"scripts": {
"client": "cd client && npm start",
"server": "node server.js",
"dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
},
"dependencies": {
"express": "^4.16.2"
},
"devDependencies": {
"concurrently": "^3.5.0"
}
}
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:
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
app.get('/api/mensagem', (req, res) => {
res.send({ express: 'Hello From Express' });
});
app.listen(port, () => console.log(`Listening on port ${port}`));
Este código é uma simples API REST utilizando o bom e velho 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:
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state = {
response: ''
};
componentDidMount() {
this.callApi()
.then(res => this.setState({ response: res.express }))
.catch(err => console.log(err));
}
callApi = async () => {
const response = await fetch('/api/mensagem');
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
};
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">{this.state.response}</p>
</div>
);
}
}
export default App;
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 (na raiz do projeto):
npm run dev
Isso 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!
Versão em Vídeo
Se preferir, você também pode acompanhar todos os passos que foram feitos, neste vídeo:
Referências
De 0 a 10, o quanto você recomendaria este artigo para um amigo?