CODEWITHSUNDEEP
djangoreactjsdjango-rest-framework
Rigel solutions
Rigel solutions

Reputation: 5

Django frontend app not loading React Component

i am following tranversy Media Django-React tutorial. After the server is running ok, but the components in my App.js file are not displayed in the index.html. Kindly help on what could be wrong, all.

This is my project tree: see the image

Then my app.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    render() {
        return <h1>React App</h1>
    }
}
ReactDOM.render(<App />, document.getElementById("app"));

My index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.min.css">  

    <title>Lead Manager</title>

    {%load static%}

</head>

<body>
    <h1></h1>
    <div id="app"></div>

    <script>src="{%static "frontend/main.js"%}"</script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

index.js

import App from './components/App';

webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader:"babel-loader"
            }
        }]
    }
}

The backend is working fine using the api.

Upvotes: 0

Views: 699

Answers (1)

cwlau
cwlau

Reputation: 428

Change this 

<script>src="{%static "frontend/main.js"%}"</script>

to this

<script src="{%static "frontend/main.js"%}"></script>

Upvotes: 2

Related Questions