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