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',
}
};
```
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>
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>
Top comments (1)
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...