How to Build an Application with ReactJS and NodeJS

How to Build an Application with ReactJS and NodeJS

In this section, we will discuss the setup of a full-stack environment. The front-end part would be ReactJS and the back-end would be NodeJS.

Overview

In today’s world of development, the importance of React as a JavaScript library is well-known. Likewise, its combination with Node.js on the server-side can be used to yield a powerful combination. In this article, we shall primarily look at how one can build an application, making use of ReactJS on the front-end and Node.js on the backend.

Setup and Installation

In this section, we will discuss the setup of a full-stack environment. The front end part would be ReactJS and the back end would be NodeJS.

Installing ReactJS

First, we will check the simple steps to install the ReactJS front end tool. Open your working directory and run the following commands step by step. You can make any directory as your working directory. Please remember, the working directory should be a separate workspace where you install your environment and run your application.

  1. mkdir eduonix_react_example
  2. npm i -g create-react-app
  3. cd eduonix_react_example
  4. create-react-app eduonix_client
  5. cd client
  6. npm start

Following is the sample package.json created from the above configuration. In this example, we have used the listing port as 3001. You can use any other open port and modify the package.json file accordingly.

Listing 1: Sample package.json file

</p>

<pre class="lang:js decode:true">{
“name”: “eduonix_client”,
“version”: “0.1.0”,
“private”: true,
“proxy”: “http://localhost:3001/“,
“dependencies”: {
“react”: “16.8.6”,
“react-dom”: “16.8.6”,
“react-scripts”: “3.0.1”
},
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test?-?env=jsdom”,
“eject”: “react-scripts eject”
}
}</pre>
<p align="justify">

Now, our React setup is complete. We can check it by opening the localhost at port 3000.

Installing NodeJS

Now, we will check step by step process to set up the NodeJS server. Here we will be using the Express framework. Please follow the steps below to install and run the NodeJS server.

  1. cd eduonix_react_example
  2. mkdir eduonix_server
  3. npm install express-generator -g
  4. express - - view=ejs server
  5. cd eduonix_server
  6. npm install
  7. Go to server folder (here eduonix_server)
  8. Open package.json file

The package.json will be as shown below. Here, we need to do a minor modification on the port number. We need to use some other port and not 3000.Because, our front end component React is running on port 3000. Let’s make it 3001 or any other. Now, the Node.JS set up is ready for connecting.

Listing 2: Sample package.json file (for NodeJS server)

{
“name”: “eduonix_server”,
“version”: “0.0.0”,
“private”: true,
“scripts”: {
“start”: “nodemon ./bin/www”
},
“dependencies”: {
“cookie-parser”: “~1.4.3”,
“debug”: “~2.6.9”,
“ejs”: “~2.5.7”,
“express”: “~4.16.0”,
“http-errors”: “~1.6.2”,
“morgan”: “~1.9.0”,
“nodemon”: “¹.17.5”
},
“main”: “app.js”,
“devDependencies”: {},
“keywords”: [],
“author”: “Eduonix”,
“license”: “ISC”,
“description”: “”
}

Connecting ReactJS and NodeJS

In this section, we will connect the front end with the back-end server. Please follow the steps below to connect ReactJS with the Node server.

  1. Go to eduonix_react_example
  2. npm init –y
  3. Now a separate package.json file will be created outside server and client folder

The package.json file will look like this.

Listing 3: Sample package.json file (for connecting node server)

</p>

<pre class="lang:js decode:true">{
“name”: “connect_node”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“client”: “cd eduonix_client &amp;&amp; npm start”,
“server”: “cd eduonix_server &amp;&amp; npm start”,
“start”: “concurrently?-?kill-others \”npm run eduonix_server\" \"npm run eduonix_client\""
},
“keywords”: [],
“author”: “Eduonix”,
“license”: “ISC”,
“devDependencies”: {
“concurrently”: “³.5.1”
}
}</pre>
<p align="justify">

Now our ReactJS and NodeJS are up and running on port 3000 and 3001. So, you can connect the front end and back end to create various applications.

Conclusion

React and NodeJS is definitely a powerful combination, and that is exactly what has been demonstrated in this article. It gives you a basic idea about what React and NodeJS is and takes you through a sample application to help you get familiar with the concepts. You can also learn more about connecting a React App with Nodejs and how to become a React developer.

Thank you for reading!

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

Difference between Node.js and React.js and Angular.js

AngularJS turned the whole definition of web development through its existence, what was lacking in previous methods of development was inappropriate structure. It merges use of JavaScript with MVC and HTML with DOM. ReactJS is a JavaScript library and has a view, but lacks model &amp; controller components. React introduced the concept of virtual DOM which is regarded as one of the greatest advantages of React in comparison of AngularJS. Node.js is a JavaScript-based platform used for developing real-time network applications like a chat software.

React Fetch API Random User API Example | HTTP Requests in React

React Fetch API Random User API Example | HTTP Requests in React