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.

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

Primeiro, vamos criar um diretório para o nosso projeto GO e inicializar o módulo GO.

Bora codar juntos um gerenciador de metas?

embarcar na missão

mkdir go-server
cd go-server
go mod init go-server

Gin é um framework web para GO que facilita a criação de servidores HTTP.

go get -u github.com/gin-gonic/gin

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

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
}

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

Vamos criar um novo projeto React usando Vite.

Bora codar juntos um gerenciador de metas?

embarcar na missão

npm create vite@latest react-client --template react
cd react-client

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

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;

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;

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.

Bora codar juntos um gerenciador de metas?

embarcar na missão