Как создать приложение React с бэкэнд Flask?

Вы хотите использовать Python в качестве бэкэнда для вашего проекта React? Вы можете написать логику Frontend в JavaScript и использовать Python для бэкэнда. Flask делает эту интеграцию в один проект действительно легкой.

Мы будем покрывать,

Создание Flask API
Создание приложения React
Интеграция

Создание Flask API

Сначала мы начнем с создания проекта Flask. Я бы порекомендовал сделать отдельную папку для запуска кода сервера бэкэнд.

$ mkdir flask-api
$ cd flask-api

Я всегда настраиваю виртуальную среду. Виртуальная среда управляет зависимостью от проекта и остается конкретной для единого проекта. Это не влияет на пакеты систем. Следующие команды предназначены для систем на основе UNIX. Они создают виртуальную среду и активируют ее.

$ python3 -m venv venv
$ source venv/bin/activate
(venv) $

Версии Python <3.4 Не имеют встроенных виртуальных сред. Вам нужно установить сторонний пакет Virtualenv и бежать Virtualenv Venv

Теперь вы начинаете устанавливать колбу и пакет Python Dotenv. И Flask-Cors для обработки совместного использования ресурсов Cross Origin для выполнения вызовов HTTP по перекрестному происхождению.

(venv) $ pip install flask python-dotenv
(venv) $ pip install -U flask-cors

Создайте файл app.py в Flask-Api Справочник и инициализируйте окружающую среду.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

Следующий шаг – создать .env Файл, который содержит следующие данные.

FLASK_APP=app.py
FLASK_ENV=development

Flask автоматически импортирует проект из Flask_app переменная среды. И читает окружающую среду из Flask_env переменная.

Давайте начнем с написания простого API, который отвечает с “Привет, мир” Анкет В недавних версиях Flask поддерживает возвратный словарь, а не вызывает jsonify () как Флага косвенно приводит к словарю.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/hello')
def say_hello_world():
    return {'result': "Hello World"}

Запустите сервер Flask, используя Флэк бежит . Вы должны увидеть что -то вроде этого:

* Serving Flask app "app.py" (lazy loading)
* Environment: development
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with fsevents reloader
* Debugger is active!
* Debugger PIN: 306-333-596

Создание приложения React

$ npx create-react-app react-flask-app
$ cd react-flask-app

В Package.json , добавьте эту конкретную линию. Он сообщает серверу разработки прокси -запрос на API -сервер.

"proxy": "http://localhost:5000"

Интеграция

В React’s App.js файл

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [placeholder, setPlaceholder] = useState('Hi');

  useEffect(() => {
    fetch('/hello').then(res => res.json()).then(data => {
      setPlaceholder(data.result);
    });
  }, []);

  return (
    
      
        
        
          Edit src/App.js and save to reload.
        
        
          Learn React
        
        Flask says {placeholder}
      
    
  );
}

export default App;

Ура! Мы сделали это! Он автоматически делает запрос на то, чтобы извергать бэкэнд и обновлять DOM. Нет языкового барьера для связи с клиентом.

Оригинал: “https://dev.to/divyajyotiuk/how-to-create-react-app-with-flask-backend-2nf7”

Создание Flask API

Создание приложения React

Интеграция

Читайте ещё по теме: