CODEWITHSUNDEEP
javascriptreactjsdjangodjango-rest-frameworkdjango-react
Rayyan
Rayyan

Reputation: 302

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.

Upvotes: 1

Views: 1075

Answers (3)

Rayyan
Rayyan

Reputation: 302

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

Upvotes: 0

Jatin Kamboj
Jatin Kamboj

Reputation: 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>
    );
  }
}

Upvotes: 1

akhtarvahid
akhtarvahid

Reputation: 9779

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>

Upvotes: 1

Related Questions