Developing a FastAPI and React application using microservices.

Neste tutorial, vamos aprender a criar uma aplicação web utilizando FastAPI e React, utilizando microsserviços para dividir nossa aplicação em partes independentes e escaláveis. FastAPI é um framework web para desenvolvimento rápido de APIs em Python, enquanto React é uma biblioteca de JavaScript para construção de interfaces de usuário interativos.

Passo 1: Configurando o ambiente de desenvolvimento

Primeiro, certifique-se de ter o Python instalado em sua máquina. Você pode fazer o download em https://www.python.org/. Em seguida, instale o FastAPI e o uvicorn, um servidor de desenvolvimento para FastAPI, executando os seguintes comandos:

pip install fastapi
pip install uvicorn

Para a parte frontend, você também precisará do Node.js e do npm instalados. Você pode fazer o download em https://nodejs.org/. Em seguida, instale o create-react-app, que nos ajudará a criar um projeto React rapidamente:

npm install -g create-react-app

Passo 2: Criando o microsserviço com FastAPI

Vamos começar criando um microsserviço com FastAPI. Crie um novo diretório chamado backend e dentro dele crie um arquivo chamado main.py. Adicione o seguinte código ao arquivo main.py:

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello World"}

Agora, para executar o microsserviço, execute o seguinte comando no terminal dentro do diretório backend:

uvicorn main:app --reload

Isso iniciará o servidor de desenvolvimento FastAPI no endereço http://127.0.0.1:8000/.

Passo 3: Criando a aplicação React

Agora vamos criar a parte frontend da aplicação utilizando React. No diretório raiz do seu projeto, execute o seguinte comando para criar um novo projeto React:

create-react-app frontend

Em seguida, navegue até o diretório frontend e instale o pacote axios para fazer requisições para nossa API FastAPI:

npm install axios

Agora, abra o arquivo src/App.js e substitua o conteúdo por:

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

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    axios.get('http://127.0.0.1:8000')
      .then(res => {
        setMessage(res.data.message);
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default App;

Por fim, para iniciar o servidor de desenvolvimento do React, execute o seguinte comando dentro do diretório frontend:

npm start

Isso iniciará o servidor de desenvolvimento do React no endereço http://127.0.0.1:3000/.

Passo 4: Integração entre microsserviços

Agora que ambos os microsserviços estão rodando, podemos integrá-los. Altere o arquivo src/App.js do frontend para fazer a requisição para o microsserviço FastAPI:

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

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    axios.get('http://127.0.0.1:8000')
      .then(res => {
        setMessage(res.data.message);
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default App;

Dessa forma, nossa aplicação React agora está fazendo requisições para o microsserviço FastAPI e exibindo a mensagem retornada.

Este é apenas um exemplo simples de como criar uma aplicação com FastAPI e React utilizando microsserviços. A partir daqui, você pode expandir e personalizar sua aplicação conforme necessário. Além disso, existem muitas outras ferramentas e técnicas que podem ser utilizadas para criar microsserviços escaláveis e eficientes. Espero que este tutorial tenha sido útil e que você tenha aprendido algo novo!