Understand The Differences Between React.js and Node.js | Simplilearn (2024)

NodeJS and ReactJS

NodeJS

NodeJS, developed by Ryan Dahl, is mainly powered by the V8 engine of Google chrome. The NodeJS technology is mainly a framework of JavaScript, and the backend of the application is made with JavaScript using NodeJS. As NodeJS uses event-driven and non-blocking models, it is considered a very efficient and lightweight framework. NodeJS is mainly used to access databases, host APIs, and serve HTTP requests.

So mainly NodeJS is an open source cross platform runtime environment and almost foe every type of project , it a very popular tool

Many tech giants and companies like Netflix, Uber, Trello are using NodeJS and making huge profits. Outside the browser , NodeJS runs the V8 engine and the core of the google chrome and for this reason NodeJS allowed it to be very performant.

Without creating a single thread for every request , in a single process NodeJS application runs. A set of asynchronous input output primitives in its standard library are provided by NodeJS. These primitives help to prevent the JavaScript from blocking .

Whenever the input and output operations like reading a request or accessing a database or accessing a file are done by NodeJS , then the operation is resumed by NodeJS when the response is returned instead of blocking the thread or wasting the CPU cycle waitings .

A thousand concurrent connections with a single server can be handled by NodeJS without introducing the burden of managing thread concurrency .

We can say NodeJS can be considered as an advantage for those frontend developers who write the client side code in JavaScript code only for browsers , now in addition they can use JavaScript for their server side code also and they do not need to learn any extra language for that.

Example:

Netflix:

We all are familiar with the OTT platform Netflix. It is one of the biggest platforms for online video streaming. The A/B testing is conducted by Netflix so that 209.18 million users can get a rich experience. However, the problems of app scalability and conditional dependencies are very common, and therefore, NodeJS is mainly used as it is a lightweight and high-speed technology.

Uber:

NodeJS is considered as one of the crucial tech solutions by the two-sided carpooling service like Uber. NodeJS enables scaling-up in line with the rising demand for their services.

Trello:

As we all know, Trello is used for managing projects, and it uses NodeJS for its server-side. Trello developers find NodeJS very useful because it can easily manage system updates that require a lot of open connections.

Features of NodeJS

• The developers can perform non-blocking operations using NodeJS, making our web application faster.
• NodeJS is an open-source and free framework.
• Using NodeJS, the developers can make different servers such as the HTTP server, the TCP server, the DNS server, etc. There are many in-built APIs in NodeJS.
• For quickly testing the ready code using NodeJS, unit testing is available in NodeJS called Jasmine.
• To improve our application’s performance, the applications built using NodeJS can be scaled horizontally and vertically.
• The standard ECMAScript can be used in NodeJS without any kind of problems.
• We do not need to wait for our users to update the browsers , by choosing the version of NodeJS , we are in charge of deciding which ECMAScript version to use .

ReactJS

ReactJS was developed by a Facebook software engineer named Jordan Walke. ReactJS is mainly a front-end open source and a JavaScript front-end library used for building the user interfaces of our web applications or websites. There are many alternatives to ReactJS, such as AngularJs and VueJs. Initially, to show the news feed during chatting, React.js was used. Allowing the development of a dynamic library with high performance was the main motive of building the ReactJS.

From the New York Times to Twitter, the front-end library ReactJS is used in many content-based applications.

Many applications like Facebook rely mainly on user interactions with the user interface elements. Most of the dynamic elements of the Facebook web application are mainly built with the ReactJS front-end library.

Social web applications like Instagram, which Facebook maintains, also use ReactJS. For features like Google Map APIs and geolocations, Instagram uses ReactJS.

For the Gibbon platform of the video streaming applications like Netflix, the ReactJS library is used. This platform applies low-performance TV devices instead of DOM used in web browsers. The modularity, runtime performance, speed, etc., are provided to Netflix by ReactJS.

Now, let us discuss the key features of the ReactJS applications:

Features of React.js

• The app performance is enhanced or improved due to the virtual DOM or Document Object Model in ReactJS because virtual DOM updates the component states or props without reloading the page.
• Ensuring the high performance of the ReactJS, the debugger and the developer’s tools are provided to the developers.
• The code stability and the better performance of the application are guaranteed in ReactJS because it uses unidirectional or downward data flow.
• The rich UI native apps can be built using the same patterns of ReactJS, and these applications are supported by both the Android and the iOS mobile operating systems.

Now, let us go through the advantages and the disadvantages of NodeJS and ReactJS:

Advantages of NodeJS:

• Caching of individual modules is done.
• It is highly extensible.
• Scaling can be done in both horizontal and vertical ways.
• Using NodeJS, the JavaScript code can be converted to be made by the V8 engine of Google chrome.
• As NodeJS handles many connections simultaneously, it is a good option for working with the API services.
• For writing microservices like API gateway, NodeJS can be used because it is fast and lightweight.

Disadvantages of NodeJS:

• Instead of following the linear I/O blocking, asynchronous programming is followed by NodeJS.
• Though NodeJS has many features, a rich library is absent.

Advantages of ReactJS:

• The code components can be reused in ReactJS.
• It uses virtual DOM that provides better performance to our application.
• Faster debugging is done.
• It is supported by both mobile operating systems such as Android and iOS.
• Easy UI test cases.

Disadvantages of ReactJS:

• Sometimes it becomes difficult for the developers to keep pace with the newly released tools and tech.
• Sometimes it becomes difficult or complex to learn using JSX and JavaScript.

Now let us discuss how we can connect Node with React,

We are going to use ExpressJs with NodeJs for creating the backend. ExpressJS is a rapid application development framework and using this framework we can build our application very quickly on the NodeJS platform.

Our First step will be to make a custom API in ExpressJS and then we are going to connect the API endpoint with the client side React application.

First you need to be sure that NodeJS is already installed in your system.

Let us make the client side react application first :

First install your React Application for your client side by writing the below command :

npx create-react-app client

Then run this default React application in your localhost:3000 by writing the command written below :

cd client

npm start

In your http://localhost:3000 you are going to see the application like following:

Now lets create the backend application:

For that go back to the parent directory by typing cd.. And the type the following command :

npx express-generator api

After writing this command an express application will be generated on NodeJS named api.

After that go to your api application folder by cd api and there type

npm install

This command will install all the required packages in your package.json file .

Now close the client application in your terminal with ctrl + c and the go back to your api folder in your terminal and then type the below command

npm start

Now you are going to see the standard default express application in your localhost:3000.

Now we will go to the bin folder and and will go www file and will change the port no from 3000 to 9000.

After changing the port number the www file will look like the following :

#!/usr/bin/env node

/**

* Module dependencies.

*/

var app = require('../app');

var debug = require('debug')('api:server');

var http = require('http');

/**

* Get port from environment and store in Express.

*/

//change the port number from 3000 to 9000

var port = normalizePort(process.env.PORT || '9000');

app.set('port', port);

/**

* Create HTTP server.

*/

var server = http.createServer(app);

/**

* Listen on provided port, on all network interfaces.

*/

server.listen(port);

server.on('error', onError);

server.on('listening', onListening);

/**

* Normalize a port into a number, string, or false.

*/

function normalizePort(val) {

var port = parseInt(val, 10);

if (isNaN(port)) {

// named pipe

return val;

}

if (port >= 0) {

// port number

return port;

}

return false;

}

/**

* Event listener for HTTP server "error" event.

*/

function onError(error) {

if (error.syscall !== 'listen') {

throw error;

}

var bind = typeof port === 'string'

? 'Pipe ' + port

: 'Port ' + port;

// handle specific listen errors with friendly messages

switch (error.code) {

case 'EACCES':

console.error(bind + ' requires elevated privileges');

process.exit(1);

break;

case 'EADDRINUSE':

console.error(bind + ' is already in use');

process.exit(1);

break;

default:

throw error;

}

}

/**

* Event listener for HTTP server "listening" event.

*/

function onListening() {

var addr = server.address();

var bind = typeof addr === 'string'

? 'pipe ' + addr

: 'port ' + addr.port;

debug('Listening on ' + bind);

}

Now go to the routes folder and make a file named restAPI.js , here we are going to make our custom API.

Write following code in testAPI.js :

const express = require("express")

const router = express.Router()

router.get("/",(req,res)=>{

res.send("API works perfectly");

})

module.exports=router

Now go to your app.js file and import the testAPI from routes folder and use it in your app .

After doing all the required changes in app.js , your app.js will look like the following :

var createError = require('http-errors');

var express = require('express');

var path = require('path');

var cookieParser = require('cookie-parser');

var logger = require('morgan');

var indexRouter = require('./routes/index');

var usersRouter = require('./routes/users');

testAPIRouter = require("./routes/testAPI")

var app = express();

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'jade');

app.use(logger('dev'));

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);

app.use('/users', usersRouter);

app.use("/testAPI",testAPIRouter);

// catch 404 and forward to error handler

app.use(function(req, res, next) {

next(createError(404));

});

// error handler

app.use(function(err, req, res, next) {

// set locals, only providing error in development

res.locals.message = err.message;

res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page

res.status(err.status || 500);

res.render('error');

});

module.exports = app;

Now again go to your terminal and go to the api folder , type npm start , after that open http://localhost:9000/testAPI and you are going to see the following page and that means that your custom API is working properly.

Now go to your client folder and there go to your src/App.js and edit it , so that we can fetch the API endpoint and we will show the data in your client side application .

After editing the App.js will look like the following :

import logo from './logo.svg';

import React from 'react'

import './App.css';

class App extends React.Component{

constructor(props){

super(props)

this.state={apiResponse:""};

}

callAPI(){

fetch("http://localhost:9000/testAPI")

.then(res=>res.text())

.then(res=>this.setState({apiResponse:res}))

}

componentWillMount(){

this.callAPI()

}

render() {

return (

<div className="App">

<header className="App-header">

<p>{this.state.apiResponse}</p>

</header>

</div>

);

}

}

export default App;

Now go back to your api folder , here we need to set up one more thing that cross origin resource sharing so that our React application can communicate with backed which is running on a different port number , we must allow this setting otherwise it will block the request coming from other applications.

For that cross origin module needs to be installed globally within your api folder and for installing it , write the following command :

npm i –save cors

Now go to your app.js file of api folder and include cors

After doing all the changes the app.js file in your api folder will look like the following :

var createError = require('http-errors');

var express = require('express');

var path = require('path');

var cookieParser = require('cookie-parser');

var logger = require('morgan');

const cors = require("cors")

var indexRouter = require('./routes/index');

var usersRouter = require('./routes/users');

testAPIRouter = require("./routes/testAPI")

var app = express();

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'jade');

app.use(logger('dev'));

app.use(express.json());

app.use(cors())

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);

app.use('/users', usersRouter);

app.use("/testAPI",testAPIRouter);

// catch 404 and forward to error handler

app.use(function(req, res, next) {

next(createError(404));

});

// error handler

app.use(function(err, req, res, next) {

// set locals, only providing error in development

res.locals.message = err.message;

res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page

res.status(err.status || 500);

res.render('error');

});

module.exports = app;

Now go back to your terminal, stop both the client and api folder and run them again .

Open your http://localhost:9000/testAPI :

You are going to see the following:

Then open your http://localhost:3000 and you are going to see how the data from the backend has been fetched to your frontend through an API call.

If you're eager to gain the skills required to work in a challenging, rewarding, and dynamic IT role - we've got your back! Discover the endless opportunities through this innovative Post Graduate Program in Full Stack Web Development course designed by our partners at Caltech CTME. Enroll today!