Criando uma Aplicação Dinâmica com React e Node.js: Um Guia Passo a Passo

Introdução

Neste artigo, vamos explorar como criar uma aplicação dinâmica usando React e Node.js. O objetivo é construir uma aplicação web que leia dados de uma tabela e os apresente de forma interativa na interface do usuário. Vamos cobrir desde a configuração do ambiente até a implementação final, passo a passo.

Pré-requisitos

Antes de começar, você deve ter o seguinte instalado em sua máquina:

• Node.js
• npm (ou yarn)
• Um editor de código (como Visual Studio Code)

1. Configuração do Ambiente

1.1. Criar o Projeto Node.js

Primeiro, vamos criar o backend da aplicação com Node.js.

1. Crie um diretório para o projeto e navegue até ele:

   mkdir react-node-app
   cd react-node-app

2. Inicialize um novo projeto Node.js:

   npm init -y

3. Instale as dependências necessárias:

   npm install express cors

4. Crie um arquivo server.js para o backend:

   const express = require('express');
   const cors = require('cors');

   const app = express();
   const port = 5000;

   app.use(cors());
   app.use(express.json());

   // Mock data
   const data = [
     { id: 1, name: 'John Doe', age: 28 },
     { id: 2, name: 'Jane Smith', age: 34 },
     { id: 3, name: 'Emily Johnson', age: 22 }
   ];

   // Route to get data
   app.get('/api/data', (req, res) => {
     res.json(data);
   });

   app.listen(port, () => {
     console.log(`Server is running on http://localhost:${port}`);
   });

Neste código, estamos criando um servidor Express que serve dados fictícios na rota /api/data.

1.2. Criar o Projeto React

1. No diretório do projeto, crie a aplicação React:

   npx create-react-app client
   cd client

2. Instale Axios para fazer requisições HTTP:

   npm install axios

2. Desenvolvendo o Frontend com React

2.1. Configurar o React para Consumir a API

1. Substitua o conteúdo de src/App.js com o seguinte código:

   import React, { useState, useEffect } from 'react';
   import axios from 'axios';

   function App() {
     const [data, setData] = useState([]);

     useEffect(() => {
       axios.get('http://localhost:5000/api/data')
         .then(response => {
           setData(response.data);
         })
         .catch(error => {
           console.error('There was an error!', error);
         });
     }, []);

     return (
       <div className="App">
         <h1>Data Table</h1>
         <table>
           <thead>
             <tr>
               <th>ID</th>
               <th>Name</th>
               <th>Age</th>
             </tr>
           </thead>
           <tbody>
             {data.map(item => (
               <tr key={item.id}>
                 <td>{item.id}</td>
                 <td>{item.name}</td>
                 <td>{item.age}</td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     );
   }

   export default App;

Neste código, usamos axios para fazer uma requisição à API do Node.js e renderizamos os dados em uma tabela.

2. Para estilizar a tabela, adicione um arquivo CSS: Crie um arquivo src/App.css com o seguinte conteúdo:

   .App {
     text-align: center;
   }

   table {
     width: 80%;
     margin: 20px auto;
     border-collapse: collapse;
   }

   th, td {
     border: 1px solid #ddd;
     padding: 8px;
   }

   th {
     background-color: #f4f4f4;
   }

E importe o CSS em src/App.js:

   import './App.css';

2.2. Rodar o Projeto React

1. Inicie o servidor de desenvolvimento React:

   npm start

A aplicação React será executada em http://localhost:3000.

3. Testando a Aplicação

Certifique-se de que o servidor Node.js esteja rodando (node server.js), e então inicie o frontend React. Você deve ver uma tabela exibindo os dados provenientes da API.

4. Conclusão

Neste artigo, você aprendeu a configurar um ambiente de desenvolvimento com React e Node.js. Criamos um backend simples com Node.js e Express para fornecer dados e um frontend com React para consumir e exibir esses dados de maneira dinâmica.

5. Links Úteis e Recursos

• Documentação do Express
• Documentação do React
• Axios

Espero que este guia passo-a-passo seja útil para você criar e entender como integrar React com Node.js. Se tiver dúvidas ou precisar de mais detalhes, sinta-se à vontade para perguntar!