JavaScript

How to setup React.js on Client-Side in MERN Stack development

React.js is considered the top tier in the MERN stack development. It is a declarative JavaScript framework used to develop dynamic client-side applications. It also permits you to create complex interfaces by connecting the components of your data from the backend server and then rendering them as HTML. React also excels at handling data-driven and stateful interfaces with minimal code and other functionalities such as error-handling, lists, forms, events, which you expect from a modern web framework.

This write-up will demonstrate how to set up the React.js application on client-side in MERN Stack development. So, let’s start!

Note: Make sure you have “Node.js” installed on your system. Install it first before jumping into React.js application development if you do not have it already.

How to setup React.js on Client-Side in MERN Stack development

Node.js also has an “npm” Node Package Manager, which will install all of the required JavaScript packages in your React.js project. It also comprises a Node Package Tool “npx” tool which you can use for running executable packages.

To set up React.js on Client-side in MERN stack development, you first need to select a directory to install the React.js based project. You can use the “Command Prompt” for this purpose. However, we will utilize the “Visual Studio Code” terminal, making it easy to operate with the React.js application.

To do so, firstly, look for the “Visual Studio Code” application and open it:

In the opened application, click on the “File” option of the menu bar and select the “Open Folder” option:

Now, browse for the folder where you want to place your React.js application-related file. In our case, we have selected the “Employee-mern-project” folder, present in the “Local Disk (E:)”:

Next, press CTRL + SHIFT + ` to open the Visual Studio Code terminal. You can also perform the specified operation with the help of the “Terminal” menu:

At this point, we are all ready to set up the React.js application in MERN Stack Development. The execution of the “npx” command with the “create-react-app” option assists you in creating a React.js application. For instance, the below-given “npx” command will create a “mern-emsystem” React.js application which will have all of the required dependencies in its project folder:

>npx create-react-app mern-emsystem

Wait for a few minutes, as the installation of the packages will take some time:

The below-given error-free output indicates that we have successfully installed the “mern-emsystem” React.js application:

The Visual Studio Code will automatically load the create React.js application folder. Now, we will make some changes in the “index.html” file of the “mern-emsystem” React.js application:

The “index.html” file of your React.js application will somehow look like this:

Here, “React App” represents the “title” of our “mern-emsystem” application:

We will utilize the created React.js application for developing an Employee Management System with MERN Stack. So, firstly, we will change the title of our “mern-emsystem” React.js application to “Employee Management System” and save the opened “index.html” file:

In the next step, we will change the current working directory to “mern-emsystem” using the terminal:

>cd mern-emsystem

Now, write out the below-given “npm” command for starting the development of the webserver:

>npm start

As you can see from the output that our “mern-emsystem” project is compiled successfully and ready to view in the browser:

By typing the “localhost:3000” in the address bar of our browser, we will see the following interface for the “mern-emsystem” React.js application:

You can also change the content of the “App.js” JavaScript file for handling or viewing the components of your React application:

For instance, adding the following code in our “App.js” file will save the “Employee Management System” content inside a container:

import './App.css';

function App() {

  return (

    <div className="container">

      Employee Management System

    </div>

  );

}

export default App;

From the below-given image, you can see that the added “Employee Management System” content for our React.js application is successfully displayed:

That was all about the procedure of setting up React.js application on Client-Side in MERN Stack Development. You can do further customization according to your requirements.

Conclusion

React.js is a JavaScript library utilized to develop the front-end of the applications based on MERN Stack. It permits the users to create user interface components and code in JavaScript. Because of its ability to handle the rapid change in the data and build a strong connection with the back-end, it is commonly used in the development of MERN stack applications. This write-up demonstrated the procedure of setting up React.js application on client-side in MERN Stack development.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.