Hoje, estamos mergulhando no emocionante mundo do Node.js, Express e React. Seja você um programador experiente ou esteja apenas começando, este post no blog irá guiá-lo na construção de uma API poderosa usando essas tecnologias populares. Vamos abordar o básico, passar pela configuração do seu ambiente e explorar como essas ferramentas funcionam juntas. Além disso, vamos mostrar como o Apidog pode facilitar sua vida. Então, pegue seu snack favorito de codificação e vamos começar!
Por que Node.js, Express e React?
Antes de mergulharmos nos detalhes, vamos falar sobre por que você deve se importar com Node.js, Express e React.
Node.js
Node.js é um ambiente de execução que permite executar JavaScript no lado do servidor. É construído sobre o motor JavaScript V8 do Chrome, tornando-o rápido e eficiente. Com Node.js, você pode construir aplicações de rede escaláveis, lidar com múltiplas requisições simultaneamente e usar uma única linguagem de programação (JavaScript) tanto para desenvolvimento no cliente quanto no servidor.
Express
Express é um framework de aplicação web minimalista e flexível para Node.js. Ele fornece um conjunto robusto de recursos para construir aplicações web e móveis. Com o Express, você pode facilmente configurar um servidor, gerenciar rotas e lidar com requisições e respostas HTTP. É a espinha dorsal de muitas aplicações Node.js e combina perfeitamente com o React.
React
React é uma biblioteca JavaScript para construir interfaces de usuário. É mantida pelo Facebook e por uma comunidade de desenvolvedores individuais e empresas. O React permite que você crie componentes de UI reutilizáveis e gerencie o estado de sua aplicação de maneira eficiente. Quando combinado com Node.js e Express, você pode construir aplicações web dinâmicas e responsivas com facilidade.
Configurando Seu Ambiente de Desenvolvimento
Para começar, você precisará configurar seu ambiente de desenvolvimento. Aqui está um guia passo a passo:
Instale o Node.js: Vá para o site do Node.js e baixe a versão mais recente. Siga as instruções de instalação para o seu sistema operacional.
Instale o npm: npm (Node Package Manager) vem embalado com o Node.js. Você pode verificar se ele está instalado executando npm -v no seu terminal.
Configure um Novo Projeto: Crie um novo diretório para seu projeto e navegue até ele no seu terminal. Inicialize um novo projeto Node.js executando npm init. Siga as instruções para criar um arquivo package.json.
Instale o Express: Execute npm install express para instalar o Express.
Instale o React: Você usará o Create React App para configurar um novo projeto React. Execute npx create-react-app client para criar um novo app React em um diretório client.
Instale o Apidog: Para tornar o desenvolvimento e teste de API mais fáceis, usaremos o Apidog. Você pode baixá-lo gratuitamente do site do Apidog.
Construindo Sua API com Node.js e Express
Agora que seu ambiente está configurado, vamos construir uma API simples usando Node.js e Express.
Passo 1: Configure o Servidor Express
Crie um novo arquivo chamado server.js no diretório raiz do seu projeto. Adicione o seguinte código para configurar um servidor Express básico:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Olá Mundo!');
});
app.listen(port, () => {
console.log(`Servidor rodando em http://localhost:${port}`);
});
Execute node server.js no seu terminal. Você deve ver "Servidor rodando em http://localhost:3000". Abra seu navegador e navegue até http://localhost:3000 para ver "Olá Mundo!".
Passo 2: Crie Rotas de API
Em seguida, vamos criar algumas rotas de API. No seu arquivo server.js, adicione o seguinte código para criar uma API simples que retorna uma lista de usuários:
const users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
{ id: 3, name: 'Sam Smith' }
];
app.get('/api/users', (req, res) => {
res.json(users);
});
A partir de agora, quando você navegar até http://localhost:3000/api/users, verá uma resposta JSON com a lista de usuários.
Passo 3: Conecte-se a um Banco de Dados
Para tornar nossa API mais dinâmica, vamos nos conectar a um banco de dados. Usaremos o MongoDB para este exemplo. Primeiro, você precisará instalar mongoose executando npm install mongoose.
Crie um novo arquivo chamado db.js e adicione o seguinte código para se conectar ao MongoDB:
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/mydatabase', {
useNewUrlParser: true,
useUnifiedTopology: true
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'erro de conexão:'));
db.once('open', () => {
console.log('Conectado ao MongoDB');
});
module.exports = db;
No seu arquivo server.js, requer o arquivo db.js para se conectar ao banco de dados:
const db = require('./db');
Agora, vamos criar um modelo Mongoose para nossos usuários. Crie um novo arquivo chamado user.js e adicione o seguinte código:
const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
name: String
});
const User = mongoose.model('User', userSchema);
module.exports = User;
No seu arquivo server.js, atualize a rota /api/users para buscar usuários do banco de dados:
const User = require('./user');
app.get('/api/users', async (req, res) => {
const users = await User.find();
res.json(users);
});
Agora você pode adicionar, atualizar e deletar usuários do seu banco de dados MongoDB, e sua API refletirá dinamicamente essas mudanças.
Integrando o React com Node.js e Express
Agora que temos nossa API configurada, vamos integrá-la com um frontend React.
Passo 1: Configure o Proxy
Para fazer requisições à nossa API a partir do frontend React, configuraremos um proxy. Abra o arquivo client/package.json e adicione a seguinte linha:
"proxy": "http://localhost:3000"
Passo 2: Busque Dados da API
No seu aplicativo React, vamos criar um componente que busca dados da API e os exibe. Abra o arquivo client/src/App.js e substitua seu conteúdo pelo seguinte código:
import React, { useEffect, useState } from 'react';
import './App.css';
function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('/api/users')
.then(response => response.json())
.then(data => setUsers(data));
}, []);
return (
<div className="App">
<h1>Usuários</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
export default App;
Execute npm start no diretório client para iniciar o servidor de desenvolvimento do React. Você deve ver uma lista de usuários buscados de sua API exibida na página.
Testando sua API com Apidog
Agora que você tem uma API funcional e um frontend React, é hora de testar sua API. Apidog é uma ferramenta fantástica para isso.
Passo 1: Abra o Apidog e crie uma nova requisição.
Passo 2: No editor de testes, insira a URL do seu endpoint da API, selecione o método HTTP e adicione quaisquer headers, parâmetros ou dados de corpo que você precisar. Por exemplo, você pode testar a rota que retorna uma mensagem simples que criamos anteriormente:
Passo 3: Clique no botão Enviar e veja o resultado do seu teste. Você deve ver o código de status, o tempo de resposta e o corpo da resposta da sua API. Por exemplo, você deve ver algo assim:
O Apidog é uma ótima ferramenta para testar suas APIs, pois ajuda a garantir a qualidade, confiabilidade e desempenho dos seus serviços web. Também economiza seu tempo e esforço, pois você não precisa escrever nenhum código ou instalar qualquer software para testar suas APIs. Você pode simplesmente usar seu navegador e desfrutar da interface amigável e recursos do Apidog.
Conclusão
Parabéns! Você construiu com sucesso uma API poderosa usando Node.js, Express e React. Você aprendeu como configurar seu ambiente de desenvolvimento, criar rotas de API, conectar-se a um banco de dados e integrar o React com seu backend. Além disso, você descobriu como o Apidog pode simplificar o teste da sua API.
Lembre-se, isso é apenas o começo. Existem inúmeras maneiras de estender e melhorar sua aplicação. Você pode adicionar autenticação, implementar rotas mais complexas e aprimorar seu frontend com recursos adicionais.