Вы хотите использовать 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 (); } export default App;![]()
Edit src/App.js and save to reload.
Learn ReactFlask says {placeholder}
Ура! Мы сделали это! Он автоматически делает запрос на то, чтобы извергать бэкэнд и обновлять DOM. Нет языкового барьера для связи с клиентом.
Оригинал: “https://dev.to/divyajyotiuk/how-to-create-react-app-with-flask-backend-2nf7”