In this session, we will discuss how to set up a React JS environment with an example.
There are numerous steps involved in creating the development of React JS environment. You need NodeJS as pre-requisites.
Start the React installation process by using NPM. Installation can be done in two ways:
Use of webpack and babel Use of the create-react-app command Installation of ReactJS by using webpack and babel
A module bundler (load and manage independent modules). Taking dependent modules while compiling them into the individual bundle. Using this bundle to develop the app through the command line or through configuring the webpack.config file.
Babel a JavaScript compiler, use to convert source code into another code. By using Babel you use a new ES6 feature within code and Babel converts into plain old ES5 and runs on all browsers.
Following are the steps to create a React environment
Step 1: Creating Root Folder:
Creating a folder with reactApp Create a module require to generate a package.json file. Run the npm init command in the cmd prompt to create the package.json file. You can provide the module information or can skip the option by using -y.
C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Step 2 – installing React and react DOM:
The primary task is to install ReactJS and its DOM packages. It’s important to carefully install react and react-dom commands of npm respectively.
C:\Users\username\Desktop\reactApp>npm install react react-dom --save
Step 3 – Installation of webpack:
Hence we are using a webpack that generates bundler install webpack, webpack-dev-server, and webpack-cli.
C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save
Step 4 – Installing babel:
Installing a babel along with its plugins such as babel-loader, babel-core, HTML-webpack-plugin, babel-preset-env, and babel-preset-react
C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev
Step 5 – Creating the Files:
To finish the installation process you just need to create some files, named index.html, webpack.config.js, main.js, App.js, and babel.
C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc
Step 6 – Setting up the Compiler, Server, and Loaders:
Opening up the webpack-config.js file and enter the code mentioned below. Setting up the webpack entry point as main.js. The output path is the place for served bundled apps and set the development path as 8001 port. You can use the port of your desire.
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: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
Step 7 – index.html:
A regular HTML and we set div id = “app” as the root element for our apps along with we add script index_bundle.js as our bundle app file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="app"></div>
<script src="index_bundle.js"></script>
</body>
</html>
Step 8 − App.jsx and main.js
The first react component is app.jsx and main.js. Moreover, this component will render Hello World.
aap.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;
One must need to import the component while rendering to the root App element. Hence, one sees it in the browser.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
Step 9 – Running the Server
After the installation setup is complete, one must start the server by executing the following commands:
C:\Users\username\Desktop\reactApp>npm start
Step 10 – Generate the bundle:
Lastly generate the bundle to run the command in the command prompt as:
C:\Users\Learncodeweb\Desktop\reactApp>npm run build
This way the bundle will be generated into the react app folder. Display as:
Using the create-react-app command
Apart from using a webpack and babel, one can install the React JS by simply installing a create-react-app.
Step 1 – installation of create-react-app
we through your desktop screen and start installing the Create React App by using the commands in the command prompt:
C:\Users\Learncodeweb>cd
C:\Users\Learncodeweb\Desktop\
C:\Users\Learncodeweb\Desktop>npx create-react-app my-app
A folder name”my-app” will be created on the desktop that will install all the important files.
Step 2 – Delete all the source files
In the src folder, browse through the recently generated my-app folder and delete all the files as shown below:
C:\Users\Learncodeweb\Desktop>cd my-app/src
C:\Users\Learncodeweb\Desktop\my-app\src>del *
C:\Users\Learncodeweb\Desktop\my-app\src\*, Are you sure (Y/N)? y
Step 3 – Add new files
Now add the new files with “index.js ” and “index.css ” names in the src folder by using these commands:
C:\Users\Learncodeweb\Desktop\my-app\src>type null > index.css
C:\Users\Learncodeweb\Desktop\my-app\src>type null > index.js
Open the index.js file and write the following code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
Step 4 – Execute the project:
Lastly, execute the project by using the start command:
npm start
