javascript 根本没有在 HTML 中呈现（React，Flask 应用程序）答案

【问题标题】：javascript not rendering at all in HTML (React, Flask app)javascript 根本没有在 HTML 中呈现（React，Flask 应用程序）
【发布时间】：2020-05-01 23:43:10
【问题描述】：

我正在尝试使用 python、HTML、Javascript、React、Flask 构建一个 Web 应用程序。我创建了 python 包，我的 HTML 可以找到 javascript。但它并没有替换 HTML 中的项目。如果有人有任何见识，我将不胜感激。

我已经安装了 react chrome 工具，但它说那个页面没有使用 react。所以我真的不知道如何调试这个错误了。如果有人对此有见解，请发表评论。

树：

├── README.md
├── bin
│   ├── install
│   └── run
└── meme
    ├── meme
    │   ├── __init__.py
    │   ├── main.py
    │   ├── static
    │   │   └── js
    │   │       ├── generate.jsx
    │   │       └── search.jsx
    │   └── templates
    │       ├── generate.html
    │       └── search.html
    ├── meme.egg-info
    │   ├── PKG-INFO
    │   ├── SOURCES.txt
    │   ├── dependency_links.txt
    │   ├── requires.txt
    │   └── top_level.txt
    └── setup.py

什么 localhost:8888/search/ 看起来像：显然它没有渲染。

Loading...

搜索.HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Search</title>
    </head>

    <body>
        <div id="reactEntry">Loading...</div>
        <script type="text/javascript" src="{{url_for('static', filename="js/search.jsx")}}"></script>

    </body>
</html>

搜索.jsx：

import React from 'react';
import ReactDOM from 'react-dom';


class SearchObj extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            query = "",
            imgs = [{"name": "img1"}, {"name": "img2"}], // list of img dictionary
        }
        this.submitQuery = this.submitQuery.bind(this);
    }

    submitQuery() {}

    render() {
        console.log("render")
        return (
            <form onSubmit={this.submitQuery}>
                <input id="query" type="text" name="submit">submit query</input>
            </form>
        );
    }
}


// This method is only called once
ReactDOM.render(
  <SearchObj url="/search/" />,
  document.getElementById('reactEntry'),
);

【问题讨论】：

标签： javascript html reactjs web-applications

【解决方案1】：

浏览器不知道如何处理 .jsx 文件，因此您必须先将其转换为常规 JavaScript，然后您的应用才能解析它。您可以使用 Webpack 或 Parcel 之类的捆绑器来捆绑您的 JavaScript。

这篇文章完全符合您的要求，使用 Flask 为 React 应用程序提供服务：https://itnext.io/a-template-for-creating-a-full-stack-web-application-with-flask-npm-webpack-and-reactjs-be2294b111bd

Re：调试 - 当事情不工作时，您可以使用浏览器的 devtools 进行调试。通过右键单击打开 devtools 并选择“Inspect”（在不同的浏览器中可能略有不同）。打开控制台查看是否有任何错误，或打开“网络”选项卡查看 JavaScript 文件的状态。

【讨论】：