ISSUE: HELP!!!!React JS Displaying an Empty White Screen
Tags: kenya, 100daysofcode, womenwhocode, react
Published: 2019-03-14 09:37:28

---

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**


    ```javascript
      <pre>
    <code>
       
     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',
    
  }
};
     </pre>
    </code>
     ```




        
   


 **Below are the codes for my package.json file**


```ReactJS
      <pre>
    <code>
       
     {
  "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": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "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": ""
}

    
  </pre>
    </code>
     ```





 






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


```javascript
      <pre>
    <code> 
          <!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>

    <div id ="app"></div>
    <script source = " ./bundle.js"></script>
    
</body>
</html>
 </code>
 </pre>
```








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

```javascript
      <pre>
    <code>
import React from 'react';
import ReactDOM from 'react-dom';


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

ReactDOM.render(

    div1,
    document.getElementById('app')

); 

<code>
</pre>
```