Django 模板不显示 React 组件答案

【问题标题】：Django template not displaying React componentDjango 模板不显示 React 组件
【发布时间】：2021-11-20 00:42:16
【问题描述】：

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

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

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";

视图只是呈现 index.html

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

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

【问题讨论】：

标签： python reactjs django webpack babeljs

【解决方案1】：

export default class App extends Component{...}

代替

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

【讨论】：