ReactJS Environment Setup

In this chapter, we will show you how to successfully set up the environment for React development. Please note that there are many steps involved, but this will help speed up the development process in the future. We will need NodeJS, so if you haven't installed it yet, please check the links in the table below.

After successfully installing NodeJS, we can start using npm to install React-on. You can install ReactJS in two ways

• Use webpack and babel.

• Usecreate-react-appcommand.

Install ReactJS using webpack and babel

Webpackis a module bundler (manages and loads independent modules). It takes related modules and compiles them into a single (file) bundle. You can use this bundle to develop applications using the command line or by configuring the application development through the webpack.config file.

Babel is a JavaScript compiler and transpiler. It is used to convert one source code to another source code. With this feature, you will be able to use ES6new features, while Babel will convert them to ordinary ES5.

Number1Step-Create the root folder

Use the mkdir command to create a folder named reactApp on the desktop to install all the necessary files.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

To create any module, you need to generate a package.json file. Therefore, after creating the folder, you need to create a package.json file. To do this, you need to run the npm init command from the command prompt.

C:\Users\username\Desktop\reactApp>npm init

This command asks for information about the module, such as package name, description, author, etc. You can use the –y option to skip this information.

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"
}

Number2Step-Install React and React dom

Because our main task is to install ReactJS, we install it and its dom package separately using npm install react and react-dom command. You can use -- The 'save' option adds the software packages we install to the package.json file.

C:\Users\w3codebox\Desktop\reactApp>npm install react　--save
C:\Users\w3codebox\Desktop\reactApp>npm install react-dom　--save

Or, you can install them all in a single command as shown below:

C:\Users\username\Desktop\reactApp>npm　install　react　react-dom　--save

Number3Step-Install Webpack

Since we use webpack to generate bundles, please 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

Alternatively, you can install all these programs in a single command, such as:

C:\Users\username\Desktop\reactApp>npm　install　webpack　webpack-dev-server　webpack-cli　--save

Steps4-Install Babel

Install Babel and its plugin Babel-core, babel-loader, babel-preset-env, babel-preset-react and html-webpack-plugin

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

Alternatively, you can install all these programs in a single command, such as-

C:\Users\username\Desktop\reactApp>npm　install　babel-core　babel-loader　babel-preset-env　
　　　babel-preset-react　html-webpack-plugin　--save-dev

Number5Step-Create files

To complete the installation, we need to create some files, namely index.html, App.js, main.js, webpack.config.js, and .babelrcThese files can be manually created, or created using the command prompt.

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

Number6Step-Set compiler, server, and loader

webpack.config.js

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'
　　　　　　})
　　　]
}

Open package.json and delete the following in the "scripts" object "test" "echo \"Error: no test specified\" && exit" 1". We are removing this line because we will not be doing any testing in this tutorial. Let's add start and build commands.

"start": "webpack"-dev-server　--mode development　--open　--hot","build": "webpack"　--mode production"

Number7Step-index.html

This is just plain HTML. We will setdiv id = "app"is the root element of the application, and addindex_bundle.jsScript (bundled application 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>

Number8Step-App.jsx and main.js

This is the first React component. We will delve deeper into React components in the next chapter. This component will renderHello World.

App.js

import React, { Component } from 'react';
class App extends Component{ render(){
　　　　　　return(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Hello World</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

We need to import this component and render it to our rootAppelement so that we can see 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'));

Create a file with a name,.babelrcand copy the following content into the file.

{
　　　"presets":["env", "react"]}

Steps9-Run server

After the setup is complete, we can start the server by running the following command.

C:\Users\username\Desktop\reactApp>npm start

It will display the port we need to open in the browser. In our case it ishttp://localhost:8001/. After opening it, we will see the following output.

Steps10-Generate package

Finally, to generate the bundle, you need to run the build command in the command prompt as follows:

C:\Users\w3codebox\Desktop\reactApp>npm run build

This will generate a distribution package in the current folder, as shown below.

using create-react-app command

In addition to using webpack and babel, you can also installcreate-react-appto install ReactJS more simply.

Number1Step-Install create-react-app

Navigate to the desktop and install Create React App using the command prompt, as shown below-

C:\Users\w3codebox>cd C:\Users\w3codebox\Desktop\
C:\Users\w3codebox\Desktop>npx create-react-app my-app

This will create a folder named my on the desktop-Install all necessary files in the app folder.

Number2Step-Delete all source files

Browse the generated my-Delete all files in the src folder of the app folder, as shown below-

C:\Users\w3codebox\Desktop>cd my-app/src
C:\Users\w3codebox\Desktop\my-app\src>del　*
C:\Users\w3codebox\Desktop\my-app\src\*, Are you sure (Y/N)? y

Number3Step-Add File

Add a file with the name in the src folderindex.cssandindex.jsThe file file-

C:\Users\w3codebox\Desktop\my-app\src>type nul > index.css
C:\Users\w3codebox\Desktop\my-app\src>type nul > index.js

Add the following code in the index.js file

import React from 'react';import ReactDOM from 'react-dom';import　'./index.css';

Steps4-Run the Project

Finally, run the project using the start command.

npm start