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

@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 будет отображать эти данные на клиенте.

@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, и вы можете дополнить его функционалом по мере необходимости.