DEV Community

Winnie Magoma
Winnie Magoma

Posted on • Edited on

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


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');
Enter fullscreen mode Exit fullscreen mode

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

      <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>
Enter fullscreen mode Exit fullscreen mode

Below are the codes for index.js file

      <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>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
winniebosy profile image
Winnie Magoma

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