将React集成到Flask应用程序中的简单方法？

Question

这是我的flask项目，我正在尝试获取一个反应文件来工作。

其中，我们有app.py，其中包含路线，应该在模板文件夹中点击index.html。

app = Flask(__name__)

@app.route("/stem")
# test channel
def qi():
    return render_template('index.html')

在html中，我为App.js运行脚本很简单，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="{{ url_for('static',filename='styles/App.css') }}">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
    <title>nstem</title>
  </head>
  <body>
    <script src="{{ url_for('static', filename='js/App.js') }}"> </script>
    <div id="root">
    </div>
  </body>
</html>

反过来，它应该运行一个创建一堆元素的函数。

import React from 'react';
import './static/styles/App.css';
import ReactDOM from 'react';
import game from './vectors/game.svg';
import v1 from './vectors/v1.svg';
import v2 from './vectors/v2.svg';
import flower4 from './vectors/flower4.svg';
import unity from './vectors/unity.svg';
import box from './vectors/box.svg';
import map1 from './vectors/map1.svg';
// <img class="map1" src={map1}/>

function DataStructures() {

  const section = 'lists';

  return (
    <div>
    <section class = "section">Allah'u'abha</section>
      <div>
        <div >
        <div></div>
          <div class = "listBox1"></div>
          <div class = "indexBox1"></div>
          <div class = "boxIndex1"></div>
      </div>
    </div>
    <div>
      <div >
        <div class = "listBoxes1"></div>
        <div class = "listBoxes2"></div>
        <div class = "listBoxes3"></div>
      </div>
    </div>
    <div>
      <div >
        <div class = "listBoxes1b"></div>
        <div class = "listBoxes2b"></div>
        <div class = "listBoxes3b"></div>
        <div class = "boxIndex1b"></div>
        <div class = "indexValue"></div>
      </div>
    </div>
    <div>
      <div >
        <img class="flower2" src={v1}/>
        <img class="flower3" src={v2}/>
        <img class="flower4" src={flower4}/>

      </div>
      <div class="metabox">
        <img class="flower5" src={flower4}/>
      </div>
      <div >
        <img class="box" src={v2}/>

      </div>

    </div>

  </div>
  );
}

ReactDOM.render(
  <DataStructures />,

  document.getElementById('root')
);

问题是，仅出现该页面的背景色。我试图了解我在这里所缺少的。我需要编辑我的项目结构，还是其他？

Answer 1

由于您的React组件采用JSX格式，因此最有可能出现此问题，因为JSX需要转换为浏览器可读的JavaScript。您可能习惯于喜欢Create-React-App的工具链会（使用Babel）为您转换（但据我所知，在Flask中，您必须自己处理）。

[使用Flask，有一些教程可以制作与React集成的工具链，但是如果您已经拥有相当丰富的Flask应用程序，那可能会很棘手。

我的解决方法是为项目初始化NPM，安装babel-cli软件包，将JSX文件预先转换为JS，然后将HTML页面链接至已转换的JS文件。

您可以通过运行以下命令进行安装：

npm init -y
npm install babel-cli@6 babel-preset-react-app@3

从那里，运行此命令：

npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod

where（jsdirectory）是使用JSX编写的React组件文件所在目录的路径，而（outputdirectory）是您希望翻译后的文件显示-use的目录路径。使（outputdirectory）的转译文件出现在您的根目录中。

一旦输出了.js文件，就象通常使用script标记一样，尝试将它们与HTML页面关联，并且应该正确呈现。

将React集成到Flask应用程序中的简单方法？

问题描述投票：0回答：1

1个回答

最新问题

将React集成到Flask应用程序中的简单方法？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1