In this write-up, we will discuss React JS Most importantly, how to set up a React JS Development Environment? So lets begin.

What is React JS?

React js is usually called React. It is a javascript library used for creating a hierarchy of UI components, that is, rendering UI components. It provides front-end and server-side support.

Setting up React JS Development Environment

To run any react js application, we must have Nodejs installed on our PC. So we have to proceed through the step mentioned below:-

NodeJS and NPM

NodeJS is the platform needed for the development of ReactJS. You may visit the official download link of NodeJS to download and install the latest version of NodeJS on your PC.

After successfully installing NodeJS on your PC, we start installing ReactJS upon it using npm. You can set up the ReactJS environment in two ways:

 By creating react app using boilerplate command

 By using Web Pack and babel

1) Creating React App Using Boilerplate Command

Step 1: First, we will install the boilerplate globally. Then we run the below command in the command prompt to install ReactJS Boilerplate.

npm, install -g create-react-app After successfully installing the react boilerplate, the next thing is to create our react app.

Step 2: Run the below command to create a new project

Exp create-react-app my-app

This command will create the app named my-app.

Step 3: You can run the project by typing the command

cd my-app

Npm start

It will give you the output in the terminal.

Step 4: Now, we will create the react app using the Boilerplate that we have installed. This command will create an app

Create-react-app MyApp

This statement will create a new directory named MyApp in your device with lots of files to run a React app successfully.

The main files on which we will be working within the introductory course are index.html and index.js. This index.html file has a div element with id root, inside which everything will be rendered. All our react codes will be inside the index.js file.

Now that we have successfully set up the development environment, Now we will start the development server.

Step 5: Start the development server, for that go inside your current directory MyApp and execute the below command.

npm start

Now on successfully running the above command, your compiler will show an output like

Local: http://local host:3000/

On your

Network: http://192.168.43.220:3000/

Thats it, now the ReactJS web development environment is set up and ready.

2) Using Webpack & Babel

ReactJS and JSX syntax (syntax extension to JS) is mainly used to speed up the development process and also make it easier. The JSX syntax is not understandable by the browser. So we need a transcompiler that is Babel to convert JSX into JavaScript code.

Below mentioned steps to be performed to set up the React JS Development Environment:

Step 1: Install Babel-Loader For JSX

We need a babel-loader for JSX file types, babel-preset-react, that will make your browser update automatically when any change occurs to your code without losing the current state of the app.

Now the question is how we will install the Web Pack which would be helpful in the ReactJS Development Environment process.

To Install the webpack, use the following command given below.

reactApp>npm install babel-core babel-loader babel-preset-env babel-preset-react babel-webpack-plugin -save-dev

You can use these commands to install separately

reactApp>npm install babel-core -save-dev

reactApp>npm install babel-loader -save-dev

reactApp>npm install babel-preset-env -save-dev

reactApp>npm install babel-preset-react -save-dev

reactApp>npm install babel-webpack-plugin -save-dev

Step 2: Create Files

To complete the installation process, you need to add these files to your project folder. These files are webpack.config.js, index.html, app.js, main.js, and .babelrc. You can create these files manually using a command prompt.

reactApp>touch index.html

reactApp>touch App.js

reactApp>touch main.js

reactApp>touch webpack.config.js

reactApp>touch .babelrc

1) Configure Web Pack

You can configure Web Pack in webpack.config.js by adding the code given below. Configure web pack specifies the entry point of your app, the created output, and the extension that will be resolved automatically. It also set the development servers port to 8080. It specifies the loaders for processing the different file types used inside your app, and it concludes by inserting plugins required during development.

Webpack.config.js

const path = require(path);
constHtmlWebpackPlugin = require(html-webpack-plugin);
exports = {
entry: ./main.js,
output: {
path: path.join(__dirname, /bundle),
filename: index_bundle.js
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: babel-loader,
}
}
]
},
plugins:[
newHtmlWebpackPlugin({
template: ./index.html
})
]
}

Open the package.json file and delete the test echo && exit 1 inside the script, then add the start and build the command instead. It is because we will not perform any testing in the app.

{
name: reactApp,
version: 1.0.0,
description: ,
main: index.js,
scripts: {
start: webpack-dev-server -mode development -open -hot,
build: webpack -mode production
},
keywords: [],
author: ,
license: ISC,
dependencies: {
react: ¹¶.8.6,
react-dom: ¹¶.8.6,
webpack-cli: ³.3.1,
webpack-dev-server: ³.3.1
},
devDependencies: {
@babel/core: ·.4.3,
@babel/preset-env: ·.4.3,
@babel/preset-react: ·.0.0,
babel-core: ¶.26.3,
babel-loader: ¸.0.5,
babel-preset-env: ¹.7.0,
babel-preset-react: ¶.24.1,
html-webpack-plugin: ³.2.0,
webpack: ´.30.0
}
}

2) HTML WebPack for the template for index.html

Using the HtmlWeb-pack plugin module, we can use a custom template to create index.html. This allows us to add a viewport tag to our software to promote mobile-sensitive scaling. It also adds the index bundle.js script, our packaged app file, and sets the div id = app as the root attribute for your app.

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

3) App.jsx

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

Now, import this component and give it to your root App element to see it in the browser.

4) Main.js

import React from react;

import ReactDOM from react-dom;

import App from ./App.js;

ReactDOM.render(<App />, document.getElementById(app));

5) Create .babelrc file

Create a file with the name .babelrc and copy the following code.

.babelrc

{
presets:[
@babel/preset-env, @babel/preset-react]
}

Step 3: Running the Server

After the installation process gets completed and the app gets set up, you can start the server by running the following command.

reactApp>npm start

It will show the port number we need to open in the browser.

Step 4: Generate the Bundle

Generate the application kit now. The bundling method is to monitor import files and merge them into one file, a bundle. You can then load a whole app on a website. This kit will be included. The construct command has to be executed with the command prompt shown below to create this.

reactApp>npm run build

This command will generate the bundle in your current folder. I.e. index.html, index_bundle.js.

Original Source:-How to Set up a React JS Development Environment?

How to Set up a React JS Development Environment