Node and React — A brief introduction

Disclaimer: This was originally written for a friend of mine who wanted to know how Node/Express and React fit together. I thought of putting it here as I feel it can be helpful to others starting the journey. This is not a guideline on how to use Node or React and shouldn’t be treated as such. It’s just to get you familiar with the ecosystem so there’s minimal code.

Node and React are the two hot topics since the last few years. In my opinion, this is the best time to learn React and Node.

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

Express is a framework based on NodeJS which is used to create server side for an app.

Before learning Node and React, remember the following:

• Node uses callback functions, a lot. React uses Promises as ES6 uses promises. So, get familiar with ES6.
• Node also uses requireJS format for importing modules. // var express = require(‘express’).
• React uses ES6 which uses import format. // import express from ‘express’. Also read: https://medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910
• NPM is used for installing modules dependencies. // mentioned at the end of article

Best way to learn node, or anything else, is to build something with it.

Try building a basic crud app like a blog or todo app using Node and express.

Then move to React.

A little bit of history to get started.

So, not so long time ago i.e. initially we had server side rendered pages. Then came client side rendering using Single page applications.

In client side technologies, there are 3 types:

1. Libraries like jQuery which manipulate Dom.
2. MVC frameworks like angular, emberJS which introduce the concept of MVC in frontend and
3. View library / framework like React

How is angular different than react you ask ?

Angular has two way binding which means that there are two ways to update data in angular. Either through view or through the model which is basically the data store. But React has only one (uni) directional binding that means the data has only one source of truth that is the data store. Changing the data in view wouldn’t change anything unless the data in store is changed.

Data store in react is of two types:

1. local state,
2. Global store ( redux or flux or mobx store ).

Here state is nothing but a JS object which has all the data in the form of key value pairs.

If we want to persist state across pages ( containers in React ), we can use global store. Otherwise local state is good enough.

So how does React and Node fit together ?

Suppose we are building a Blog which will have crud functionalities and few pages like list of blog posts, contact us and blog post details page.

We will use Node/ Express in the backend and React in frontend.

Now React is just the view part of frontend. We have to store the data coming from backend api and also allow routing. For this purpose we will use React router and Redux. Actually we can get away with using Redux by creating 3 containers — Each for List of blog posts, contact us and blog post details. Each container will have their own data (local state) which won’t be shared with other containers.

How does it work ?

We will have a server side in express which is a framework of NodeJS.

In express we can declare routes for each pages we want. So we will have a

homepage ( list of blog posts ) at path=’/‘,
details of a blog post at path=‘/:id’ and
contact us at path=‘/contact’.

every route we define takes two params — request and response and has a callback function.

app.get(‘/’, function(req, res) {
  res.send(‘Hello World’)
})

Whenever a user visits the url mapped to path=‘/‘, a request is sent to the server and server returns the response in callback function. Inside the callback function, we can write our logic.

Similarly we can write functions for different paths.

app.get(‘/:id’, function(req, res) {
  res.send(‘New Post’)
})

Where does React fit in the picture ?

React handles the frontend of the app ( obviously ). Whenever user visits path=“/“, a request is sent to the express server which returns the response to the browser. Now in frontend, we have routers mapped to handle response coming from different routes and display the data. This is done using react router and react. Routers are required in frontend to load the appropriate components for each path as the backend server doesn’t care which component is loaded when user visits path=‘/‘. All it knows is what data to send when user visits a defined path.

React router just maps a path to a component.

<Route path=‘/‘ component={Homepage} />
<Route path=‘/contact‘ component={Contact} />

When we visit path=‘/‘, the homepage component will load.

After getting data from server in the form of JSON, we would like to display a list of blog posts. This can be done by creating a container in React ( say Homepage container )

A Component is a class or function that describes part of a React UI and Container is just a component which has access to state and lifecycle methods.

In Homepage container, we can create a function that will loop through the JSON and create a list of posts. It’s like a typical html page but written in JSX (which is weird looking cousin of html).

Data on sever side can be stored in any database ( MongoDB, firebase database ).

This is the gist of using Express in backend and React in frontend.

Also What is NPM ?

Npm is a package manager through which one can install various packages ( modules ) needed for web development. It’s a CLI tool which gives access to it’s online repository which contains thousands of open-source Node.js projects.

Getting started with npm is fairly simple. You just need to add a package.json file in your project and mention all the dependencies and run npm install from command line and it will install the packages. This is much better than manually downloading the libraries and copying them into the correct directories, and use them that way (something I used to do in the good ol’ days of bootstrap and jQuery).

Create React App is a very good boilerplate to get started with React.

For express, refer the official docs.

Thanks for reading. Please comment if you want to learn more about React ecosystem.

I use React, Redux, Redux Saga, React Router in my job everyday and I’m sure will be able to help you in someway.

Reference: ( I’m not the owner, just found them very well written)

https://zellwk.com/blog/crud-express-mongodb

Getting Started With Node.js : A Beginners Guide

Checkout some of my other posts:

1. Why is customer acquisition a wrong metric to measure startup’s growth.
2. Named export vs default export.
3. What’s the difference between super and super(props) in ES6.
4. CurrentTarget vs Target in Js.
5. Getting rid of relative paths in import statement using webpack aliases.