Integrando GO com React via Requisições HTTP
Vamos aprender a configurar um servidor GO e integrá-lo com um cliente React criado com Vite para realizar requisições HTTP. Vamos dividir esse conteúdo no formato guia em duas partes: Configuração do Servidor GO e Configuração do Cliente React.
Requisitos
Antes de iniciar, certifique-se de que você possui os seguintes requisitos instalados e configurados em seu sistema:
GO (Golang)
Instale a versão estável mais recente do GO a partir da página oficial de download do GO.
Configure as variáveis de ambiente conforme descrito anteriormente.
Node.js e npm
Instale a versão LTS do Node.js, que inclui o npm (Node Package Manager), a partir da página oficial de download do Node.js.
Verificar Instalações
Para verificar se GO está instalado corretamente, abra um terminal e execute:
go version
Para verificar se Node.js e npm estão instalados corretamente, abra um terminal e execute:
node -v npm -v
Parte 1: Configuração do Servidor GO
Passo 1: Criar um Novo Projeto GO
Primeiro, vamos criar um diretório para o nosso projeto GO e inicializar o módulo GO.
mkdir go-server cd go-server go mod init go-server
Passo 2: Instalar o Pacote Gin
Gin é um framework web para GO que facilita a criação de servidores HTTP.
go get -u github.com/gin-gonic/gin
Passo 3: Instalar o Pacote gin-contrib/cors
Para facilitar a configuração do CORS (Cross-Origin Resource Sharing), vamos instalar o pacote
gin-contrib/cors.go get github.com/gin-contrib/cors
Passo 4: Criar o Arquivo main.go
Crie um arquivo
main.go e configure o servidor para responder a uma requisição HTTP GET.package main import ( "github.com/gin-contrib/cors" "github.com/gin-gonic/gin" "net/http" ) func main() { router := gin.Default() // Configurar o middleware de CORS router.Use(cors.Default()) router.GET("/data", func(c *gin.Context) { c.JSON(http.StatusOK, gin.H{ "message": "Hello from GO!", }) }) router.Run(":8080") // O servidor vai rodar na porta 8080 }
Passo 4: Executar o Servidor
Para iniciar o servidor, execute o comando:
go run main.go
O servidor GO agora está configurado para responder a requisições HTTP GET no endpoint
/data com uma mensagem JSON. Agora vamos para o front-end 👇Parte 2: Configuração do Cliente React com Vite
Passo 1: Criar um Novo Projeto React com Vite
Vamos criar um novo projeto React usando Vite.
npm create vite@latest react-client --template react cd react-client
Passo 2: Instalar o Axios
Vamos usar o Axios (saiba mais sobre o Axios), que nos fornece uma biblioteca popular para fazer requisições HTTP no React.
npm install axios
Passo 3: Criar um Componente para Fazer a Requisição HTTP
Crie um novo arquivo chamado
FetchData.jsx no diretório src e adicione o seguinte código:import { useState, useEffect } from 'react'; import axios from 'axios'; const FetchData = () => { const [data, setData] = useState(''); useEffect(() => { axios.get('http://localhost:8080/data') .then(response => { setData(response.data.message); }) .catch(error => { console.error('There was an error!', error); }); }, []); return ( <div> <h1>{data}</h1> </div> ); } export default FetchData;
Passo 4: Integrar o Componente no Aplicativo React
Abra o arquivo
src/App.jsx e importe o componente FetchData. Em seguida, adicione-o ao componente principal:import React from 'react'; import './App.css'; import FetchData from './FetchData'; function App() { return ( <div className="App"> <header className="App-header"> <FetchData /> </header> </div> ); } export default App;
Passo 5: Executar o Cliente React
Para iniciar o cliente React, execute:
npm run dev
Agora, ao abrir o navegador em
http://localhost:3000, você verá a mensagem "Hello from GO!" exibida na tela, que foi obtida através da requisição HTTP ao servidor GO.Neste guia, configuramos um servidor GO usando o framework Gin e criamos um cliente React usando Vite que faz uma requisição HTTP ao servidor GO utilizando Axios. Também configuramos o middleware de CORS para permitir requisições entre diferentes origens. Essa integração permite que você construa aplicações web modernas e escaláveis combinando a robustez do GO no backend com a flexibilidade do React no frontend.
