Modern web development frameworks like Angular / React are
complex and involves complex environment setup before we could write our Hello
World program. Setting up the development environment for React is a tedious
task. In this post we will try to set up the development environment and
display Hello World using a react component.
1. First let us create a folder ReactHelloWorld, we will setup the environment and create the Hello World component in this folder.
2. Next make sure node is installed in the pc, if not installed already install the latest version of Node.js. We can check if Node is installed by running the command node –v, if Node is installed this command will return the version of Node.js Installed in the pc.
ReactHelloWorld>node –v
v8.12.0
1. First let us create a folder ReactHelloWorld, we will setup the environment and create the Hello World component in this folder.
2. Next make sure node is installed in the pc, if not installed already install the latest version of Node.js. We can check if Node is installed by running the command node –v, if Node is installed this command will return the version of Node.js Installed in the pc.
ReactHelloWorld>node –v
v8.12.0
3. Next let us create an empty project by running the npm init command, give a name, description and other details for the prompts. This will create a package.json file with the following content.
{
"name": "reacthelloworld",
"version": "1.0.0",
"description": "Reach Hello World",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"React"
],
"author": "Prakash",
"license": "ISC"
}
"name": "reacthelloworld",
"version": "1.0.0",
"description": "Reach Hello World",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"React"
],
"author": "Prakash",
"license": "ISC"
}
4. Next we will install the required packages to build and run the
React App, run the following command to install the required tools.
npm install --save react react-dom
npm install --save webpack webpack-dev-server webpack-cli
npm install --save @babel/core @babel/preset-env @babel/preset-react babel-loader
npm install --save react react-dom
npm install --save webpack webpack-dev-server webpack-cli
npm install --save @babel/core @babel/preset-env @babel/preset-react babel-loader
5. To process HTML files we need to install the following packages
npm install html-webpack-plugin html-loader --save-dev
6. Now we have installed all the required packages we can now create
the web-pack configuration file webpack.config.js
with the following content.
const HtmlWebPackPlugin = require("html-webpack-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader:
"babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader:
"html-loader"
}
]
},
{
test: /\.css$/,
use: [
{
loader:
"css-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template:
"./src/index.html",
filename:
"./index.html"
})
]
};
This configuration will instruct webpack to use babel-loader to process .js & .jsx files. Use html-loader to process .html files.
6. Next we will create a bable configuration file .babelrc as follows
This configuration will instruct webpack to use babel-loader to process .js & .jsx files. Use html-loader to process .html files.
6. Next we will create a bable configuration file .babelrc as follows
{
"presets":
["@babel/preset-env", "@babel/preset-react"]
}
7. Now that we have created the required config files, let us now go ahead and create the actual React component files. Create a folder src and create a file index.js inside the folder as follows. This is our actual React component which will display the test Hello World
import React from "react";
7. Now that we have created the required config files, let us now go ahead and create the actual React component files. Create a folder src and create a file index.js inside the folder as follows. This is our actual React component which will display the test Hello World
import React from "react";
import ReactDOM from "react-dom";
class Welcome extends React.Component {
render() {
return <h1>Hello
World !!!</h1>;
}
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
8. Next we will create an index.html file in the root folder as
follows, this will be the root file, the Hello World react component will be
loaded in this file in place of the root
div tag.
<html>
<html>
<head>
<meta
charset="utf-8">
<title>React,
Webpack, and Babel</title>
</head>
<body>
<div
id="root"></div>
</body>
</html>
9. When we build the application webpack will create the bundle file main.js and add a script tag to the index.html file pointing to the bundle file.
<body>
9. When we build the application webpack will create the bundle file main.js and add a script tag to the index.html file pointing to the bundle file.
<body>
<div
id="container">
</div>
<script
src="main.js"></script>
</body>
10. Next we will have to modify the start property in the package.json file to initiate the webpack compilation as follows.
"scripts": {
10. Next we will have to modify the start property in the package.json file to initiate the webpack compilation as follows.
"scripts": {
"start":
"webpack-dev-server --open --mode development",
"build":
"webpack --mode production"
}
12. Open a browser and enter the address http://localhost:8080
in the browser, the output will be as follows.
The final package.json looks as follows
{
{
"name":
"ReactHelloWorld",
"version":
"1.0.0",
"description":
"",
"main":
"index.js",
"scripts": {
"start":
"webpack-dev-server --open --mode development",
"build":
"webpack --mode production"
},
"keywords": [],
"author":
"",
"license":
"ISC",
"devDependencies": {
"@babel/core":
"^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"babel-loader":
"^8.1.0",
"html-loader":
"^1.1.0",
"html-webpack-plugin":
"^4.3.0",
"webpack":
"^4.43.0",
"webpack-cli":
"^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"bootstrap":
"^4.5.0",
"css-loader":
"^3.5.3",
"react":
"^16.13.1",
"react-dom":
"^16.13.1",
"react-redux":
"^7.2.0",
"redux":
"^4.0.5"
}
} 
No comments:
Post a Comment