-

react
app:
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> cd prodos
react
 app
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> mkdir prodos
react
 app
Let’s use the npm init command in PowerShell to generate the package.json file:
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm init -y

---

We have used the -y option in the preceding command to skip asking information about the module such as package name, description, author,
and so on, as shown in the following screenshot :
Figure 7.4: Executing the npm init -y command
Now, let’s install React and react-dom in the React application directory using the following command:
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install react react-dom --save
The following screenshot displays the output after executing the preceding command:
Figure 7.5: Installing React and react-dom
We will now install webpack, webpack-dev-server, and webpack-cli to generate a bundler using the following commands:
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install webpack -–save
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install webpackdev-server -–save
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install webpack-cli –-save
The following screenshot displays the output after executing the preceding command:
Figure 7.6: Installing webpack, webpack-dev-server and webpack-cli
Now, we will install the babel compiler in your React application using the following commands:
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install babel-core --save-dev

---

PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install babel-loader --save-dev
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install babel-preset-env --save-dev
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install babel-preset-react --save-dev
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install htmlwebpack-plugin --save-dev
The following screenshot displays the output after executing the preceding commands:
Figure 7.7: Installing babel
Let’s create the required files for the React application. The file names we require are index.html, App.js, main.js, webpack.config.js, and .babelrc.
After creating these files, we will edit the webpack.config.js file and set the compiler, server, and loader as shown in the following code snippet:
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
   entry: ‘./main.js’,
   output: {
   path: path.join(__dirname, ‘/bundle’),
   filename: ‘index_bundle.js’
   },
   devServer: {
   inline: true,
   port: 8383
   },
   module: {
   rules: [
   {
   test: /.jsx?$/,
   exclude: /node_modules/,
   loader: ‘babel-loader’,
   query: {
   presets: [‘es2015’, ‘react’]
   }
   }
   ]

---

   },
   plugins:[
   new HtmlWebpackPlugin({
   template: ‘./index.html’
   })
   ]
}
As you can see in the following screenshot, application files are created after all the commands get executed:
Figure 7.8: Generated files under the React application
Let’s edit the package.json file as shown in the following code:
{
   “name”: “prodos
react
app”,
   “version”: “1.0.0”,
   “description”: “”,
   “main”: “index.js”,
   “scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”
   },
   “keywords”: [],
   “author”: “”,
   “license”: “ISC”,
   “dependencies”: {
   “react”: “^16.8.4”,
   “react-dom”: “^16.8.4”,
   “webpack”: “^4.29.6”,
   “webpack-cli”: “^3.3.0”,
   “webpack-dev-server”: “^3.2.1”
   },
   “devDependencies”: {

---

   “babel-core”: “^6.26.3”,
   “babel-loader”: “^8.0.5”,
   “babel-preset-env”: “^1.7.0”,
   “babel-preset-react”: “^6.24.1”,
   “html-webpack-plugin”: “^3.2.0”
   }
}
We will delete the highlighted text from the preceding code because we do not have any test that can be executed for our React application as of
now. And now we will add the following lines inside the script in place of the deleted line:
“start”: “webpack-dev-server --mode development --open --hot”,
“build”: “webpack --mode production”
Now, we will edit the index.html file as shown in the following code:
   
   
   
   
   
   
   
The preceding file will be the home page of the PRODOS front-end application, and now we can edit the App.js file and add the following code
inside this file:
import React, { Component } from ‘react’;
class App extends Component{
   render(){
   return(