时间戳

首页 > 解决方案 > 如何将 React 和 material-ui 与烧瓶后端一起使用？

javascript - 如何将 React 和 material-ui 与烧瓶后端一起使用？

问题描述

我是反应的初学者。我只是想用烧瓶后端制作一个 web 应用程序，并用material-ui对前端做出反应，但我在设置它时遇到了问题。

我做了什么

我从这里下载了 React 脚本。然后来自 CDN 的 material-ui 链接可在此处获取，babel 可从此处获取。当我为需要离线支持的本地网络开发时，我下载并自行托管了它们。

我的代码

索引.html

<html>
    <head>
        <script src="/src/libs/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script src="/src/js/index.js" type="text/babel"></script>
</html>

index.js

import {React} from './src/libs/react.min.js';
import {ReactDOM} from './src/libs/react-dom.min.js';
import * as mui from './src/libs/material-ui.min.js';

ReactDOM.render(<mui.Switch />, document.getElementById('root'))

它几乎是空的，因为我只是在设置东西。

我面临的错误

Uncaught ReferenceError: require is not defined
    at <anonymous>:5:17
    at VH (babel.min.js:1)
    at a (babel.min.js:1)
    at s (babel.min.js:1)
    at XMLHttpRequest.HH.t.forEach.e.src.o.onreadystatechange (babel.min.js:1)

现在我不知道如何让这个需要与 python 后端一起工作的东西。有没有其他方法可以解决这个问题？即使所有代码都必须更改，因为它只是设置而没有实际代码，这也没关系。

标签： javascriptreactjsflaskpython-babel

解决方案

Babel 需要一些配置才能为 JSX 工作，并且它不支持生产中的浏览器。相反，我建议使用create-react-app. 您需要做的就是创建一个应用程序并将您的文件复制index.js到src中，然后您可以使用该build命令为您的 Python 后端获取静态 HTML/JS/CSS 文件。

推荐阅读