Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Qual a melhora maneira de passar dados Dinamicos

Referente ao curso Flask: crie uma webapp com Python, no capítulo Listando jogos usando o Flask e atividade Pegando lista do servidor

por Pedro Augusto Adão Silva
| 18.5k xp | 17 posts

Estou começando meus estudos em Flask, mas, para deixar este projeto um pouco mais complexo, estou usando um servidor React como front-end e fiz a passagem de dados de uma forma um pouco diferente da que foi ensinada na aula. Gostaria de saber se essa é a melhor ou a maneira mais utilizada para passar os dados de forma dinâmica para o React através do Flask.

FLASK:

from flask import Flask, render_template, jsonify
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, origins='*')

@app.route('/', methods=["Get"])
def games():
    return jsonify(
        {
            "games": [
            'God of war',
            'Brawhalla',
            'Rocket League',
            'Paladins',
            'Fortnite'
            'Minecraft'
            ]        
        }
    )

if __name__ == '__main__':
    app.run(debug=True, port=8000)

REACT: 

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

function App() {

  const fethApi = async () => {
    const response = await axios.get("http://127.0.0.1:8000/")
    console.log(response.data.games)
    setArray(response.data.games)
  }

  useEffect(() => {
    fethApi()
  }, [])

  return (
    <div>
      <h1>Minha Aplicação React</h1>
    </div>
  );
}

export default App;
2 respostas
solução!
por Armano Barros Alves Junior
| 2444.9k xp | 5038 posts
Alura Scuba Team Monitor | Suporte Educacional

Olá Pedro! Tudo bem?

A maneira que você está utilizando para passar dados dinâmicos do Flask para o React é bastante comum e eficiente, especialmente quando você está lidando com um front-end moderno como o React.

No seu exemplo, você está usando o Flask para criar uma API que retorna dados em formato JSON. O React, por sua vez, faz uma requisição HTTP para essa API usando o Axios, que é uma biblioteca popular para esse tipo de operação. Essa abordagem é amplamente utilizada em aplicações web modernas, pois permite uma separação clara entre o front-end e o back-end, além de facilitar a manutenção e escalabilidade do projeto.

Aqui estão alguns pontos que você pode considerar para melhorar ainda mais sua implementação:

  1. Tratamento de Erros: É sempre bom adicionar um tratamento de erros na sua chamada Axios para lidar com possíveis falhas na requisição. Você pode usar um bloco try-catch ou o método catch do Axios para isso.

  2. Estado do Componente: No seu componente React, você mencionou setArray, mas não está claro se você está usando um estado do React para armazenar os jogos. Certifique-se de inicializar o estado corretamente usando useState.

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

function App() {
  const [games, setGames] = useState([]);

  const fetchApi = async () => {
    try {
      const response = await axios.get("http://127.0.0.1:8000/");
      console.log(response.data.games);
      setGames(response.data.games);
    } catch (error) {
      console.error("Erro ao buscar os jogos:", error);
    }
  };

  useEffect(() => {
    fetchApi();
  }, []);

  return (
    <div>
      <h1>Minha Aplicação React</h1>
      <ul>
        {games.map((game, index) => (
          <li key={index}>{game}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

  3. CORS: Você já está usando o flask_cors para permitir requisições de qualquer origem, o que é ótimo para desenvolvimento. Apenas lembre-se de configurar isso corretamente em produção para evitar problemas de segurança.

Essa abordagem de API RESTful é bastante robusta e flexível, permitindo que você expanda facilmente seu projeto no futuro.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.
por Pedro Augusto Adão Silva
| 18.5k xp | 17 posts

Entendii, muito obrigado Armano pela ajuda!