ReactJS Imports not working blank webpage

Question

I am a beginner learning ReactJS and was trying to make a full-stack quiz web application using DjangoRestFramework+ReactJS.

The Problem

I am not seeing anything rendering to my webpage when I try using imports. I am not getting any errors, but my web page is blank.

My Files

Here is my App.JS.

import { render } from "react-dom";
import HomePage from "./HomePage";
import GameJoinPage from "./GameJoinPage";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <HomePage />
    );
  }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);

My Index.html

<! DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-9">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quiz App</title>
    {% load static %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
    <link rel="stylesheet" type="text/css" href="{% static "css/index.css" %}"
    /> 
  </head>
  <body>
    <div id="main">
      <div id="app">
      </div>
    </div>
    <script src="{% static "frontend/main.js" %}"></script>
  </body>
</html>

And my HomePage file

import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateRoomPage from "./CreateGamePage";
import { 
  BrowserRouter as Router, Switch, Route, Link, Redirect} from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }
  render(){
    return (
      <Router>
        <Switch>
          <Route exact path="/"><p>This is the home page</p></Route>
          <Route path="/join" component={GameJoinPage} />
          <Route path="/create" component={CreateGamePage} />
        </Switch>
    </Router>
    );

  }
}

What I tried

When I put <h1>Hello World</h1> in place of <HomePage \>, It rendered the Hello World to the webpage as expected. But when I put the <HomePage \> or any other tag such as <CreateGamePage \> In App.js, nothing renders to the webpage. I am not getting any errors on Webpack compilation.

What do you see in web developer tools, in the response to the request? Do you have any errors in the Django server? I can recommend [good tutorial about Django+React](https://saasitive.com/django-react/boilerplate/). It is using decoupled Django and React. — pplonski, Nov 25 '20 at 17:30
Thank you! I checked my console and found out that I had misspelled an import. — Rayyan, Nov 25 '20 at 18:04

score 1 · Answer 1 · answered Nov 25 '20 at 16:31

1

Try with id #main

const appDiv = document.getElementById("main");

and just change HomePage.js to check

<Switch>
    <Route exact path="/" render={()=> <h2>render default page</h2>}/>
    <Route path="/join" component={GameJoinPage} />
    <Route path="/create" component={CreateGamePage} />
</Switch>

answered Nov 25 '20 at 16:31

akhtarvahid

9,445
2
26
29

@VahidAktar I'm still seeing a blank page. What difference would changing the id to `main` make? It's the parent div. – Rayyan Nov 25 '20 at 16:37

score 1 · Answer 2 · answered Nov 25 '20 at 17:39

Add router to the parent element

import { render } from "react-dom";
import HomePage from "./HomePage";
import GameJoinPage from "./GameJoinPage";
import { BrowserRouter as Router } from "react-router-dom";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Router>
        <HomePage />
      </Router>
    );
  }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);

Change the HomePage file to

import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateRoomPage from "./CreateGamePage";
import { Switch, Route, Link, Redirect } from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Switch>
        <Route exact path="/" render={() => <p>This is the home page</p>} />
        <Route path="/join" component={GameJoinPage} />
        <Route path="/create" component={CreateGamePage} />
      </Switch>
    );
  }
}

score 0 · Accepted Answer · answered Nov 25 '20 at 18:02

I figured it out! The issue was not with my code, it was a misspelling in my HomePage.js file. I was trying to import CreateRoomPage from CreateGamePage when in fact in CreateRoomPage did not exist, the correct one was CreateGamePage. Thank you all for the helpful responses!

Before HomePage.JS

import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateGamePage from "./CreateGamePage"; // Now its correct!
import { Switch, Route, Link, Redirect } from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Switch>
        <Route exact path="/" render={() => <p>This is the home page</p>} />
        <Route path="/join" component={GameJoinPage} />
        <Route path="/create" component={CreateGamePage} />
      </Switch>
    );
  }

After

import React, { Component } from "react";
import GameJoinPage from "./GameJoinPage";
import CreateRoomPage from "./CreateGamePage";
import { Switch, Route, Link, Redirect } from "react-router-dom";

export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Switch>
        <Route exact path="/" render={() => <p>This is the home page</p>} />
        <Route path="/join" component={GameJoinPage} />
        <Route path="/create" component={CreateGamePage} />
      </Switch>
    );
  }

ReactJS Imports not working blank webpage

3 Answers3