Criando uma API REST com NestJS e consumindo-a no React

Como criar uma API REST com NestJS e consumi-la no React

Criar uma API REST é uma habilidade essencial para desenvolvedores que desejam construir aplicações web modernas. Neste tutorial, vamos abordar como utilizar o NestJS para criar uma API RESTful e, em seguida, como consumi-la utilizando o React. Ao final, você terá uma aplicação completa e funcional.

O que é NestJS?

NestJS é um framework para construir aplicações Node.js eficientes e escaláveis. Ele utiliza TypeScript por padrão e é inspirado em princípios do Angular, o que facilita a vida de quem já está familiarizado com esse framework. A modularidade e a arquitetura baseada em componentes tornam o desenvolvimento de APIs uma tarefa muito mais intuitiva.

Instalando o NestJS

Para começar, precisamos instalar o NestJS. Você pode fazer isso utilizando o CLI do NestJS. Execute o seguinte comando no terminal:

npm i -g @nestjs/cli

Esse comando instala o CLI globalmente. Após isso, você pode criar um novo projeto com:

nest new my-nest-api

Estruturando a API

Uma vez que você tenha criado o projeto, navegue até a pasta do projeto e inicie o servidor:

cd my-nest-api
npm run start

Agora, vamos criar um controlador e um serviço para gerenciar os dados. Execute o seguinte comando:

nest generate resource items

Isso criará um controlador e um serviço para os itens. O controlador gerencia as requisições HTTP, enquanto o serviço lida com a lógica de negócios.

Implementando o CRUD

No serviço items.service.ts, você pode implementar os métodos de criação, leitura, atualização e exclusão (CRUD). Aqui está um exemplo de como poderia ser:

import { Injectable } from '@nestjs/common';
import { Item } from './item.entity';

@Injectable()
export class ItemsService {
Private items: Item[] = [];

    create(item: Item) {
        this.items.push(item);
        return item;
    }

    findAll() {
        return this.items;
    }

    // Outros métodos de CRUD...
}

Neste código, estamos criando um array de itens e implementando o método create para adicionar novos itens. O método findAll retorna todos os itens armazenados.

Consumindo a API com React

Agora que temos nossa API funcionando, é hora de consumi-la no React. Primeiro, você precisa criar um novo projeto React:

npx create-react-app my-react-app

Após criar o projeto, instale a biblioteca axios para facilitar as requisições HTTP:

npm install axios

Fazendo Requisições

No componente onde você deseja consumir a API, utilize o axios para fazer uma requisição:

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

const App = () => {
    const [items, setItems] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get('http://localhost:3000/items');
            setItems(response.data);
        };
        fetchData();
    }, []);

    return (
        <div>
            <h1>Items</h1>
            <ul>
                {items.map(item => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default App;

No código acima, utilizamos o hook useEffect para chamar a API assim que o componente é montado. A resposta da API é armazenada no estado items, que é então exibido em uma lista.

Conclusão

Neste tutorial, você aprendeu a criar uma API REST com NestJS e a consumi-la em uma aplicação React. Essa é uma habilidade valiosa para qualquer desenvolvedor, pois permite a construção de aplicações robustas e escaláveis.

Dicas para melhorar sua API

• Sempre valide os dados de entrada para evitar problemas de segurança.
• Considere implementar autenticação para proteger suas rotas.
• Utilize ferramentas de teste para garantir que sua API funcione como esperado.

Próximos passos

Explore mais sobre NestJS e suas funcionalidades avançadas, como middleware e interceptors. Além disso, continue aperfeiçoando suas habilidades em React para criar interfaces de usuário ainda mais interativas e responsivas.

A Importância da Integração entre Front-end e Back-end na Criação de APIs

A integração entre front-end e back-end é um dos pilares do desenvolvimento web moderno. Com o NestJS, você pode criar uma API REST que não só é escalável, mas também mantém uma estrutura organizada e limpa. Essa abordagem modular permite que diferentes partes do seu sistema sejam desenvolvidas e testadas de forma independente. Ao consumir essa API no React, você se beneficia de uma experiência de usuário fluida e responsiva, aproveitando o melhor das duas tecnologias.

Algumas aplicações:

• Criação de sistemas de gerenciamento de conteúdo.
• Desenvolvimento de aplicativos de e-commerce.
• Integração com serviços de terceiros.
• Construção de dashboards interativos.

Dicas para quem está começando

• Comece pequeno: construa uma API simples antes de adicionar complexidade.
• Estude a documentação do NestJS para entender melhor suas funcionalidades.
• Experimente com diferentes tipos de dados e métodos HTTP.

Compartilhe este tutorial