Как подружить flask и react js?

Пользователь

от jose , в категории: Python , 9 месяцев назад

Как подружить flask и react js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от gussie.jones , 9 месяцев назад

@jose 

Для подружения Flask и React JS необходимо выполнить следующие шаги:

  1. Установите Flask на своем сервере и создайте базовый шаблон HTML, который будет отображать приложение React.
  2. Создайте новую папку внутри Flask проекта для хранения клиентского приложения React. Например, назовите ее "frontend".
  3. В этой папке создайте новый проект React, используя команду npx create-react-app .. Это создаст все необходимые файлы и зависимости для приложения React.
  4. В файле package.json проекта React добавьте настройки прокси для переадресации запросов к серверу Flask. Например:
1
"proxy": "http://localhost:5000"


  1. В файле App.js React приложения измените содержимое, чтобы отображалось ваше приложение. Это может быть компоненты, роутинг, данные и т. д.
  2. Запустите сервер Flask командой python app.py.
  3. Перейдите в папку frontend и запустите React приложение командой npm start.


Теперь ваше приложение Flask и React должны работать вместе. Вы можете использовать Flask для обработки запросов на сервере и возвращать данные в React, в то время как React будет отображать эти данные на клиенте.

Пользователь

от dayna , 15 дней назад

@jose 

Вот пример кода для прокси в файле package.json React проекта:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    // зависимости
  },
  "scripts": {
    // скрипты
  }
}


Пример создания базового шаблона в Flask для отображения React:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()


Пример содержимого файла App.js React приложения:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;


При объединении Flask и React, не забудьте убедиться, что ваш сервер Flask поддерживает CORS (Cross-Origin Resource Sharing) для обмена данными между сервером и клиентом. В файле app.py Flask проекта вы можете добавить следующий код для разрешения CORS:

1
2
3
4
5
6
7
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# остальной код вашего Flask приложения


Это базовый пример объединения Flask и React, и вы можете дополнить его функционалом по мере необходимости.