Django template not displaying React component

Question

I have installed all the packages I need, And I believe my webpack is setup correctly. I can run the server and the dev script with no errors at all.

If I was to put anything in the HTML(e.g. text) file, it shows. But no react components on it.

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>

React

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'));

The index.js just has an import:

import App from "./components/App";

Views simply renders the index.html

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

I am not getting any errors anywhere, but my html is blank. In chrome inspect, I can see that there is the main.js file is being created and send to static sources, yet none of it displays.

thuong-lino · Accepted Answer · 2021-09-28 00:43:00Z

1

export default class App extends Component{...}

Instead of

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

answered Sep 28, 2021 at 0:43

thuong-lino

262 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django template not displaying React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related