Django 模板不显示 React 组件

Question

我已经安装了我需要的所有包，而且我相信我的 webpack 设置正确。我可以运行服务器和开发脚本完全没有错误。

如果我要在 HTML（例如文本）文件中放入任何内容，它会显示。但是上面没有react组件。

Webpack.config

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ],
};

HTML

<body>
    {% load static %}
    <div id="main">
        <div id="app">
        </div>
    </div>
    <script src="{% static 'frontend/main.js' %}"></script>
</body>

反应

import React, { Component } from "react";
import ReactDOM from 'react-dom';
export default class App extends Component(){
    constructor(props){
        super(props);
    }
    render(){
        return <h1> Site Placeholder </h1>
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

index.js只是有一个导入：

import App from "./components/App";

Views 只是呈现 index.html

def index(request, *args, **kwargs):
    return render(request, 'frontend/index.html')

我在任何地方都没有收到任何错误，但我的 html 是空白的。 在 chrome 检查中，我可以看到正在创建 main.js 文件并将其发送到静态源，但它显示了 none。

Answer 1

export default class App extends Component{...}

而不是

export default class App extends Component(){...}

Django 模板不显示 React 组件

Django template not displaying React component

python

django

reactjs

webpack

babeljs