how to get React file recognized within Flask proj

2020-05-09 14:56发布

问题:

I'm currently trying to put together a little Flask + React project. I have had some difficulty getting the js file (which contains the react code) to run at all in the project.

This is my project structure, standard for flask:

The route is defined in the routes.py file in the project root

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/qubits")
def qubits():
    return render_template('qubits.html')
    # http://localhost:5000/qubits

if __name__ == "__main__":

    app.run(debug=True)

I have my simple html file, which is linking properly to my css (im able to pull in css elements fine).

<!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>

However, nothing is being returned on the webpage from these two js files:

*index.js*

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

ReactDOM.render(
  <Qubit />,

  document.getElementById('root')
);


* function file *
import React from 'react';
import ReactDOM from 'react';

function Qubit() {

  const section = 'lists';

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

export default Qubit;

Im pretty stumped; ive played with this so much today and cant figure out where the gap is. Please help, and thanks so much.