Javascript 如何在Flask项目中调用JS文件/React代码？出错_Javascript_Python_Reactjs_Flask

Javascript 如何在Flask项目中调用JS文件/React代码？出错

javascript python reactjs flask

Javascript 如何在Flask项目中调用JS文件/React代码？出错,javascript,python,reactjs,flask,Javascript,Python,Reactjs,Flask,我目前正试图建立一个Flask+React项目。只是一个简单的Flask项目，js部分有一些react代码我在让js文件（包含react代码）在项目中运行时遇到了一些困难这是我的项目结构，烧瓶标准：应用程序路由在项目根目录的routes.py文件中定义；现在，只有一个主页（html文件） html文件非常简单，并且正确链接到我的css（我能够很好地导入css元素）。只是js文件没有返回任何div <!DOCTYPE html> <html lang="en">

我目前正试图建立一个Flask+React项目。只是一个简单的Flask项目，js部分有一些react代码

我在让js文件（包含react代码）在项目中运行时遇到了一些困难

这是我的项目结构，烧瓶标准：

应用程序路由在项目根目录的routes.py文件中定义；现在，只有一个主页（html文件）

html文件非常简单，并且正确链接到我的css（我能够很好地导入css元素）。只是js文件没有返回任何div

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>nstem</title>
    <link rel= "stylesheet" href= "{{ url_for('static',filename='css/nstem.css') }}">
  </head>
  <body>
    <div class="indexBox1"></div>
      <h1>: )</h1>
      <script type="text/javascript"
        src="{{ url_for('static', filename='js/index.js') }}"></script>
    </div>
  </body>
</html>


nstem
: )

但是，网页上没有从这两个js文件返回任何内容：

*index.js*

import React from 'react';
import ReactDOM from 'react-dom';
import './nstem.css';
import Qubit from './qubits';

ReactDOM.render(
  <Qubit />,

  document.getElementById('root')
);


* qubits.js *
import React from 'react';
import ReactDOM from 'react';

function Qubit() {

  const section = 'lists';

  return (
    <div>Allah'u'abha</div>
  );
}

export default Qubit;

*index.js*
从“React”导入React；
从“react dom”导入react dom；
导入“/nstem.css”；
从“./qubits”导入量子位；
ReactDOM.render(
,
document.getElementById（'root'））
);
*qubits.js*
从“React”导入React；
从“react”导入ReactDOM；
函数Qubit（）{
常量部分='列表'；
返回(
真主阿卜哈
);
}
导出缺省量子位；

我很困惑；我今天玩了这么多，不知道差距在哪里。请帮忙，非常感谢。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>nstem</title>
    <link rel= "stylesheet" href= "{{ url_for('static',filename='css/nstem.css') }}">
  </head>
  <body>
    <div class="indexBox1"></div>
      <h1>: )</h1>

      {/**/}
      <div id="root"></div>
      We call this a “root” DOM node because everything inside it will be managed by React DOM.
      {/**/}

      <script type="text/javascript"
        src="{{ url_for('static', filename='js/index.js') }}"></script>
    </div>
  </body>
</html>

nstem
: )
{/**/}
我们称之为“根”DOM节点，因为其中的所有内容都将由React DOM管理。
{/**/}

检查html模板文件DOM节点是否丢失

没有像中那样返回任何内容？您是否在浏览器的“网络”选项卡中获取了正确的数据？你的js文件会被传输到ES5吗？对这种开发来说是新的，所以请容忍我。在源代码中，index.js文件显示出来，但它看起来是空的。qubits.js文件根本没有显示。希望这会有帮助。说清楚点，网页上也没有显示任何内容。我在html文件的顶部添加了react依赖项，将类型从“text/javascript”更改为“text/babel”，甚至删除了该类型，但仍然没有，文件现在都在浏览器的源代码中，但都显示为空。其他js文件正在工作，而不是react其他js文件正在工作，只是不是那些人

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>nstem</title>
    <link rel= "stylesheet" href= "{{ url_for('static',filename='css/nstem.css') }}">
  </head>
  <body>
    <div class="indexBox1"></div>
      <h1>: )</h1>

      {/**/}
      <div id="root"></div>
      We call this a “root” DOM node because everything inside it will be managed by React DOM.
      {/**/}

      <script type="text/javascript"
        src="{{ url_for('static', filename='js/index.js') }}"></script>
    </div>
  </body>
</html>