Search code examples
javascriptreactjsdjangodjango-rest-frameworkdjango-react

ReactJS Imports not working blank webpage

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.

Solution

  • 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>
    );
  }