React: consumindo APIs HTTP no seu projeto

Obtendo dados com GET - Apresentação

Apresentando o curso e o instrutor

Olá! Bem-vindos a mais este curso de React. Meu nome é Vinicios Neves, sou o desenvolvedor careca e barbudo da Alura que vocês mais gostam. Estou aqui para aprendermos a nos comunicar com o back-end, ou seja, API e HTTP. Vamos fazer requisições e lidar com as respostas dentro do ecossistema do React.

Para alcançarmos esse resultado, há uma série de passos que precisamos seguir. Vamos começar configurando, por exemplo, o back-end. Vocês terão a opção de configurar o back-end com o Docker, caso o tenham disponível em suas máquinas, ou sem o Docker, caso não o tenham. Assim, poderão escolher o que melhor se adapta ao seu cenário.

Explorando ferramentas e técnicas

Vamos aprender a ler documentação utilizando o Swagger e explorar o que conseguimos fazer com a API. Também aprenderemos a usar uma ferramenta muito utilizada no dia a dia das pessoas desenvolvedoras, que é o Postman. Isso também fará parte do nosso curso. Além disso, vamos aprender a usar o Axios e suas funcionalidades mais complexas.

Conectando o projeto CodeConnect à API

Neste curso, vamos aprender bastante para conectar todo o fluxo do CodeConnect a uma API. O projeto CodeConnect já foi utilizado em cursos anteriores. Vamos começar fazendo alguns pequenos ajustes. Caso não tenha feito o curso anterior, mas possua os pré-requisitos, é possível baixar o projeto e continuar de onde estiver.

Requisitos e expectativas para o curso

É importante lembrar que, como pré-requisito para este curso, é necessário ter conhecimento sobre React, incluindo hooks, effects e states. Também é essencial entender como uma aplicação front-end sem React, ou seja, em Vanilla, funciona e como ela se conecta ao back-end. Vamos focar em como o React realiza essa conexão. Portanto, saber como o JavaScript faz isso é um dos pré-requisitos.

Estamos ansiosos para o próximo vídeo e esperamos que estejam tão animados quanto nós. Vamos levantar esse back-end e explorar como conectar um projeto React ao back-end. Até mais! [♪]

Obtendo dados com GET - Mudanças no Code Connect

Evoluindo o CodeConnect

Vamos continuar evoluindo o CodeConnect, focando agora na parte de comunicação com a API. Para isso, precisaremos de alguns componentes adicionais e algumas modificações desde a última vez que trabalhamos nele. Tudo está bem descrito na preparação do ambiente, mas é interessante discutirmos essas alterações.

A primeira modificação é que tanto a rota de feed quanto a rota de post, para ver os detalhes de um post, eram protegidas e agora não são mais. Vamos deixá-las liberadas o tempo todo, permitindo que mesmo pessoas não logadas consigam ver essas páginas.

Introduzindo o componente de modal

Além disso, vamos introduzir um componente de modal. Assim, ao clicar no ícone do chat, um balão de chat de comentário, poderemos abrir a modal tanto para adicionar um comentário novo quanto para editar um comentário existente. Note que ela possui algumas props indicando se está em modo de edição ou não.

Essas são as modificações principais para este curso. Vamos focar exclusivamente na camada de comunicação com a API, e já preparei isso para vocês. Agora, vamos ao VSCode para ressaltar as alterações que foram feitas. Utilizaremos as próprias folhas do Git para entender o que aconteceu.

Alterações no componente Aside

No Aside, especificamente no index.jsx do Aside, ou seja, nosso componente, fizemos uma alteração: agora, se a pessoa está autenticada, exibimos a opção de logout; caso contrário, exibimos a opção de login.

Para implementar essa lógica, utilizamos o seguinte código:

{isAuthenticated && (
  <li>
    <AsideLink href="/auth/logout">
      <IconLogin />
      Logout
    </AsideLink>
  </li>
)}
{!isAuthenticated && (
  <li>
    <AsideLink href="/auth/login">
      <IconLogin />
      Login
    </AsideLink>
  </li>
)}

Atualizações no Projeto

No componente CardPost, agora temos a modal de comentário. O ícone que abre a modal está incorporado nesse componente. Da mesma forma, no componente que exibe um comentário, aparece o ícone de balão para que possamos editar um comentário existente.

Para abrir a modal de comentário, utilizamos o componente ModalComment:

<ModalComment />

E quando estamos no modo de edição, passamos a prop isEditing:

<ModalComment isEditing />

Além disso, alteramos um ícone para que sua cor possa ser modificada via prop. Aqui está o componente IconChat que permite essa customização:

export const IconChat = ({ fill = '#888888' }) => {
    return (
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 6.01562V4H... " fill={fill} />
        </svg>
    )
}

Implementando novos componentes de modal

Introduzimos novos componentes: um componente de modal genérico, um componente de modal específico para comentários, um componente que serve como cabeçalho dessa modal, e um text area para que a pessoa usuária possa digitar o comentário.

Aqui está a implementação do componente Modal:

import { forwardRef, useImperativeHandle, useRef } from "react"
import styles from './modal.module.css'

export const Modal = forwardRef(({ children }, ref) => {
    const dialogRef = useRef(null)

    const closeModal = () => {
        dialogRef.current.close()
    }

    const openModal = () => {
        dialogRef.current.showModal()
    }

    useImperativeHandle(ref, () => {
        return {
            closeModal,
            openModal
        }
    })

    return (
        <dialog className={styles.dialog} ref={dialogRef}>
            <header className={styles.header}>
                <button onClick={closeModal}>
                </button>
            </header>
            {children}
        </dialog>
    )
})

E o componente ModalComment que utiliza o Modal:

import { useRef, useState } from "react"
import { IconButton } from "../IconButton"
import { Modal } from "../Modal"
import { Textarea } from "../Textarea"
import { Subheading } from "../Subheading"
import { IconChat } from "../icons/IconChat"
import { IconArrowForward } from "../icons/IconArrowForward"
import { Spinner } from "../Spinner"
import styles from './comment.modal.module.css'
import { Button } from "../Button"

export const ModalComment = ({ isEditing = false }) => {
    const modalRef = useRef(null)
    const [loading, setLoading] = useState(false)

    const onSubmit = async (formData) => {
        const text = formData.get('text')
        if (!text.trim()) return

        try {
            setLoading(true)
            setTimeout(() => {
                setLoading(false)
                modalRef.current.closeModal()
            }, 2000)
        } catch (error) {
            console.error('Erro ao criar/atualizar comentário:', error)
        }
    }
}

Integração da modal e ajustes nas rotas

Também integramos essa modal na página de blog post, especificamente na linha 55, onde está a modal de comentário. Um último detalhe é sobre as rotas protegidas: nas linhas 21 e 22, essas rotas estavam protegidas, mas agora não estão mais.

Para ilustrar, aqui estão as rotas que agora estão desprotegidas:

<Route path='feed' element={<Feed />} />
<Route path='blog-post/:slug' element={<BlogPost />} />

Essas foram as alterações realizadas. Se no curso anterior você nos acompanhou do início ao fim, basta fazer esses pequenos ajustes e tudo estará em ordem. Caso deseje baixar o projeto já com essas alterações, disponibilizaremos o link para que você possa baixá-lo e seguir conosco a partir de agora.

Preparando para o próximo passo

Com isso, o front-end está pronto e funcionando. Vamos abrir o terminal para mostrar que ele está executando o npm run dev do vídeo, o que nos permite interagir:

npm run dev

Nosso próximo passo é avançar para o back-end. Vamos entender o que será necessário em relação à nossa API.

Obtendo dados com GET - Executando o backend com docker

Configurando o back-end com Docker

Vamos configurar o back-end. Existem duas maneiras de realizar essa configuração. A primeira é utilizando o Docker. Se já tivermos o Docker instalado, configurado e funcionando em nossa máquina, e o hardware for compatível, podemos usar o Docker para subir o back-end, juntamente com o banco de dados. Caso não tenhamos o Docker ou, por algum motivo, não possamos executá-lo em nossa máquina, no vídeo seguinte será mostrado como levantar o back-end sem a necessidade do Docker.

Primeiramente, vamos ver como subir o back-end com o Docker. Estamos no repositório do projeto. O que faremos agora é cloná-lo. Vamos copiar o link que o próprio GitHub fornece para o clone. No terminal, abriremos uma nova aba, sairemos da pasta em que estamos, dentro do projeto do front-end, e executaremos um git clone do projeto 4870-api-com-docker.git.

git clone https://github.com/viniciosneves/4870-api-com-docker.git

Após o clone, entraremos no diretório do projeto.

cd 4870-api-com-docker/

Instalando dependências e configurando variáveis de ambiente

Seguiremos o passo a passo para levantar o back-end. Esse passo a passo está na documentação do próprio projeto. Na documentação, encontramos informações sobre o que o projeto é, o que faz, as tecnologias e ferramentas utilizadas, além dos pré-requisitos, que incluem o Node 18 ou superior, com NPM, Docker com Docker Compose e o próprio Git. Após clonar o repositório, instalamos as dependências com npm i.

npm i

Enquanto as dependências são instaladas, verificamos que será necessário criar, na raiz do projeto, um arquivo .env com valores específicos. Vamos abrir o VSCode, aumentar o zoom e fechar o Copilot.

code .

Criamos o arquivo .env na raiz e copiamos e colamos o conteúdo necessário.

# Database
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/code_connect"

# JWT
JWT_SECRET="seu-jwt-secret-super-secreto"
JWT_EXPIRES_IN="7d"

# Server
PORT=3000

No arquivo, temos o DATABASE_URL, que é a string de conexão com o banco, o segredo JWT e a porta. Seguimos as instruções e, posteriormente, analisamos o significado desses valores.

Subindo o banco de dados e configurando o Prisma

Em seguida, precisamos subir o banco de dados. Para isso, utilizamos o comando docker-compose up -d.

docker-compose up -d

No nosso caso, com a versão atualizada, o comando é docker-compose up -d. O -d é para que o terminal não fique travado no processo. Ao executar o comando, ele baixa a imagem do Postgres e realiza as configurações necessárias. Quando o processo termina, o terminal não fica preso, pois o -d significa Detached, ou seja, o processo é executado em segundo plano.

Após a execução do comando, podemos usar o terminal normalmente. No dashboard do Docker, verificamos que um container chamado Postgres está em execução, com o ID e todas as informações corretas. Agora, precisamos configurar o banco de dados, o que será feito executando dois comandos em sequência.

A primeira etapa envolve o uso do comando npx prisma migrate dev para criar as tabelas necessárias.

npx prisma migrate dev

Em seguida, utilizamos o npx prisma generate, que é responsável por gerar o que o ORM precisa.

npx prisma generate

Por fim, o npx prisma db seed é utilizado para popular o banco de dados com posts, comentários e usuários, que já estarão disponíveis para visualização.

npx prisma db seed

Finalizando a configuração e iniciando o projeto

No terminal, após limparmos a tela, executamos o npx prisma migrate dev. O processo é concluído com sucesso, indicando que o banco de dados está agora sincronizado com o nosso schema. Em seguida, executamos o npx prisma generate, que gera tudo o que o Prisma necessita para funcionar em relação ao banco de dados.

Por último, utilizamos o npx prisma db seed para popular os dados com autores, posts, comentários, entre outros. Após limparmos o terminal novamente, o processo é concluído com sucesso, e podemos ver que os autores, posts e comentários foram criados.

Com o banco de dados preparado, podemos iniciar o projeto em modo de desenvolvimento utilizando o comando npm run start:dev.

npm run start:dev

No terminal, são exibidas todas as rotas disponíveis, incluindo a rota /blog/posts, que contém os posts do nosso blog.

Para acessar, utilizamos o endereço localhost:3000/blog/posts.

localhost:3000/blog/posts

Ao fazermos uma requisição, os dados dos posts são exibidos, incluindo a capa do post, título, slug, corpo, markdown, quantidade de curtidas, entre outros. Com isso, nosso back-end está em funcionamento.

Considerações finais sobre o projeto

O projeto utiliza o Nest.js, que é o framework responsável por controlar toda a camada de back-end, utilizando TypeScript, Prisma como ORM, Postgres como banco de dados, JWT para autenticação, e Bcrypt para manipulação de senhas. Além disso, o Swagger é utilizado para documentação.

Se houver dúvidas sobre a necessidade de conhecer todos esses detalhes para o curso, a resposta é não. Essas informações são para pesquisa adicional, caso haja interesse em entender como o back-end foi desenvolvido. O essencial é seguir as instruções para levantar o back-end e conseguir realizar o fetch dos dados. Ao acessar localhost:3000/blog/posts, a lista de posts é exibida.

Não é necessário compreender o funcionamento interno, mas é importante saber ler a documentação e colocar o projeto para rodar. Se já estivermos preparados para executar o back-end no Docker, podemos pular para o próximo vídeo, onde será abordado como realizar o mesmo processo sem o Docker. Nos vemos em breve.

Sobre o curso React: consumindo APIs HTTP no seu projeto

O curso React: consumindo APIs HTTP no seu projeto possui 139 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Obtendo dados com GET
• Enviando dados com POST
• Autorizando requisições
• Atualizando dados com PATH
• Deletando dados com DELETE