CODEWITHSUNDEEP
javascripthtmldjangoreactjs
dipesh sharma
dipesh sharma

Reputation: 43

React.Js not rendering in django project

i am creating a project where react is not rendering anything on django localhost

index.html

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body>
        <div id="App">
            <!---all will be define in App.js-->
            <h1>Index.html </h1>
        </div>
    </body>
    {% load static%}
    <script src="{% static "frontend/main.js" %}"></script>
</html>

app.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './layout/header';

class App extends Component {
    render() {
        return (
        <h1>App.JS</h1>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

this is my project structure:

Project structure

After running npm run dev and python manage.py runserver this is the status everything is fine till here:

the status

Upvotes: 2

Views: 1754

Answers (3)

Simentesempre
Simentesempre

Reputation: 141

document.getElementById is case sensitive

Upvotes: 0

Cătălin George Feștilă
Cătălin George Feștilă

Reputation: 1569

Change this source code:

document.getElementById('app')

... to this:

document.getElementById('App')

Upvotes: 3

franzp
franzp

Reputation: 109

Its because your element has id of "App" but you are trying to hook react app on element 'app'. It's case sensitive.

Upvotes: 0

Related Questions