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!

react reactjs node-js api

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Node Js Vs. React Js: Difference Between Node JS and React JS

Node Js Vs. React Js: Difference Between Node JS and React JS. The Js at the end of both Node and React refer to the language of JavaScript. Node and React are both the frameworks of JavaScript. The main difference between Node.js and React.js. What exactly is React.js? React.js is another open-source code library used to develop the front-end or user interfaces for web apps and websites

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Top Node JS Developers | Best Node.js Development Company India

Hire dedicated Node JS developers & programmers in India for custom full-stack NodeJS web development projects on hourly/full-time basis. Strict NDA, 16+ years exp & 2500+ clients|450+ Experts

Hire Dedicated Node.js Developers - Hire Node.js Developers

Get business-centric Node.Js development services from expert Node.JS developers. We have expertise in developing & maintaining Node JS apps as per the business requirements.

Top React JS Development Company | React JS Development Services

As a leading React.js development company, our development team has created reusable React.js components, large-scale websites, and interactive user interfaces for global clients. 4200+ Projects | 16+ Yrs Exp