DEV Community


ISSUE: HELP!!!!React JS Displaying an Empty White Screen

Winnie Magoma
Hi, my name is Winnie. I'm a Fronted Developer from Nairobi, Kenya.|| Currently looking for an Internship|| Currently learning #a11y
Updated on ・2 min read

In the past few days i have been tirelessly been trying to understand a number of concepts in React JS, a JavaScript framework. However, the local installation process of the framework has not been a walk in the park but i was able to successfully finish the installation process. However, I am unable to identify why my nothing is rendered on my browser. I have tried diagnosing for errors but i have been unsuccessful. I'm not sure what is missing. Any assistance will be highly appreciated. Thanks.

tags: ---ReactJS,codenewbie,javascript,100daysofcode,womenwhocode,womenintech,kenya

Below are the codes for my webpack.config.js file


 const webpack = require('webpack');

module.exports = {
entry: './src/index.js',
module: {
rules: [
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
resolve: {
extensions: ['*', '.js', '.jsx']
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
plugins: [
new webpack.HotModuleReplacementPlugin()
devServer: {
contentBase: './dist',



Below are the codes for my package.json file


  "name": "reactoneapp",
  "homepage": "",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server --config ./webpack.config.js --mode development"
  "keywords": [],
  "author": "Winnie Bosibori",
  "license": "ISC",
  "babel": {
    "presets": [
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "jquery": "^3.4.1",
    "mongodb": "^3.2.7",
    "popper.js": "^1.15.0",
    "react-hot-loader": "^4.9.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3",
    "webpack-dev-server": "^3.7.1"
  "dependencies": {
    "bootstrap": "^4.3.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  "description": ""


**Below are the codes for index.html file**

          <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My First React App</title>

    <div id ="app"></div>
    <script source = " ./bundle.js"></script>


Below are the codes for index.js file

import React from 'react';
import ReactDOM from 'react-dom';

var greetings = React.createElement('h1', null, 'Hello Winnie!!')
var div1 = React.createElement('div', null, greetings);





Discussion (1)

winniebosy profile image
Winnie Magoma Author

I was able to find the solution with this...The errors were as a result of missing modules forom the files. In order to eliminate the errors, i had to reinstall the package again and everything worked fine...

Forem Open with the Forem app