Concept of Client Server in React.js Express.js & Node.js App.
By: Vikram Mandal
Tags: Nodejs, Client Server, Expressjs, Developer, React

The topic is primarily confusing for people coming from web development where we have a backend that consists of a web server like Apache, Nginx or IIS with a server side scripting language like PHP and a frontend that consists of HTML, CSS and JavaScript.

The article serves as a quick introduction for web developers into the world of Node.js based application development.

A Node.js Hello World program looks like:

// Node .js 'Hello World' const http = require('http');



const server = http.createServer((req, res) => {

res.statusCode = 200;

res.setHeader('Content-Type', 'text/plain');

res.end('Hello World');

});



server.listen(3000, '127.0.0.1', () => {

console.log('Server running');

});

AS you see we are creating a server in our code. So are we going to write our own web server?

Well Node,js platform is built for the purpose. It works based on non-blocking execution i.e. fire a task say performing a file write. After assigning the task to OS’s I/O service and it goes on to other tasks. After the file write is done Node.js gets notified and it resumes the next step post the file write. Read about Events loops in Node.js for more.

So Node.js does pretty much what Apache, Nginx or IIS was doing.

We use Node.js packages like Express.js, a web application framework, to compliment our node application. An Express.js Hello World program looks like:

// Express.js 'Hello World' const express = require('express')

const app = express()

const cors = require('cors')

app.use(cors()) app.get('/', (req, res) => {

res.send('Hello World from Express!')

})

console.log('Example app listening at

}) app.listen(8000, () => {console.log('Example app listening at http:// 127.0.0.1 : 8000')})

The above Express.js Hello World program forms the backend. In the browser (i.e. frontend) we get to see the text ‘Hello World from Express!’. There is no frontend app running here. It is just a simple static text getting displayed in the browser.

As you can see Express.js is doing what PHP or similar server side script does. Plus it takes care of the routes also which otherwise was part of web server functionality. It is Express.js that connects to a database like in PHP and React.js only communicates over http.

Now adding React.js to our application: React.js is a frontend application framework. Purpose of React.js is to get data from backend apps like those built in Express.js and create suitable display in browsers.

Creating the frontend using React

Create directory “react-express-hello-world”

cd react-express-hello-world

now create a react app.: npx create-react-app react-fe

Edit file react-fe/src/App.js and replace with

// src/App.js function App() {

return ( <div>Hello World from React!</div> );

} export default App;

cd react-fe

start the app. Now you should see “Hello World from React!” in your browser

To create the Express.js backend application

Go to the react-express-hello-world directory

Create new directory “express-be”

cd express-be

Initialize a new node.js app.: npm init -y

Install express and cors: yarn add express cors

Or if you have npm: npm install express cors

cors package is for allowing cross domain calls else you will get access error in browser console

Create file index.js inside express-be directory and copy-paste our Hello World program for Express.js from above

Now start the Express.js backend application as: node index.js

Open http://127.0.0.1:8000/ in browser and you should see “Hello World from Express!”

Now lets make our React frontend connect to the Express backend

Edit our React app index.js file

// react-fe/src/App.js import React, { useState, useEffect } from "react"; // create a functional component

const HelloExpress = () => { const [content, setContent ] = useState('...loading') // call once on load

useEffect(() => {

fetch('http://127.0.0.1:8000/')

.then(response => response.text())

.then(text => {

setContent(text)

})

}, []); return (

<div dangerouslySetInnerHTML={{ __html: content }} />

)}; function App() {

return (

<div className="App">

Hello World from React!

<br/>

<HelloExpress />

</div>

);

} export default App;

Here as have created a new React component <HelloExpress /> which interacts with our Express.js backend app. Here useEffect, useState are React hooks.

Find the full code at https://github.com/vmandal/react-express-hello-world