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

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

от fred , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от velma , год назад

@fred 

Flask и React JS можно подружить, используя различные способы. Один из способов это использовать Flask как бэкенд-сервер и отдавать данные в формате JSON, а React JS использовать как фронтенд-приложение для визуализации этих данных.


Шаги, которые необходимо следовать:

  1. Создать проект Flask и запустить бэкенд-сервер.
  2. Создать проект React JS, используя create-react-app.
  3. Настроить маршруты в Flask для отдачи данных в формате JSON.
  4. Использовать fetch или axios в React JS для получения данных с бэкенд-сервера.
  5. Отобразить полученные данные в компонентах React JS.
  6. Разместить приложение React JS в шаблоне Flask.


Это только один из возможных способов подружить Flask и React JS, существуют и другие способы, как, например, использовать Flask в качестве прокси-сервера для React JS приложения.

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

от eryn.rodriguez , 6 месяцев назад

@fred 

Вот пример кода для данного подхода:

  1. Создайте проект Flask и запустите бэкенд-сервер. Например, создайте файл app.py:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def get_data():
    data = {'message': 'Привет от Flask!'}
    return jsonify(data)

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


  1. Создайте проект React JS, используя create-react-app:
1
2
npx create-react-app my-app
cd my-app


  1. В файле src/App.js используйте fetch или axios для получения данных с бэкенд-сервера и отобразите их:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState({});

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

  const fetchData = async () => {
    const response = await fetch('/api/data');
    const jsonData = await response.json();
    setData(jsonData);
  };

  return (
    <div>
      <h1>Привет от React JS!</h1>
      <p>{data.message}</p>
    </div>
  );
}

export default App;


  1. Запустите React JS приложение:
1
npm start


По умолчанию он будет запущен на порту 3000.

  1. В файле templates/index.html вставьте корневой
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Flask + React JS</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>


  1. В файле app.py добавьте следующий код для отображения приложения React JS:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
from flask import Flask, render_template

app = Flask(__name__)

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

@app.route('/api/data')
def get_data():
    data = {'message': 'Привет от Flask!'}
    return jsonify(data)

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


  1. Перезапустите сервер Flask и откройте браузер по адресу http://localhost:5000, чтобы увидеть, как Flask и React JS работают вместе.


Это только один из способов подружить Flask и React JS, вы можете настроить их по-разному в зависимости от ваших конкретных потребностей и структуры проекта.