Forem: bewarusman

React - Integrating with Third-Party Libraries

bewarusman — Fri, 08 Jan 2021 21:48:51 +0000

Summary

In this post, I will try to explain React - Integration with third-party libraries.

Introduction

React.js open-source javascript library for building front-end applications. According to StackOverflow 2020 survey, it is the second most popular web framework after JQuery and the most wanted web framework in the industry.

There are many libraries that are written in plain Javascript or as a JQuery plugin, an example is Datatable.js. There is no need to reinvent the wheel, consume a lot of time and energy, and re-create those libraries.

When I started working on React.js last year, I faced a big problem. Integrating React.js with other libraries is not easy and straight-forward. Also, it is not very difficult to integrate with other libraries.

React.js has good documentation but it has only one example. It teaches how to integrate with the JQuery Chosen library. I found out that not all libraries can be integrated using the same technique as documented. There are some other techniques, developers need to know and use to integrate with some other libraries.

Class Components

Third-party libraries can be integrated with class components, also with functional components using Hooks. According to Dan Abramov, they (React Team in Facebook) have no plans to remove ES6 class syntax support in the future. I have poor information about Hooks, that is why I am using class components in the examples.

A React.js component may update the DOM elements multiple times during its lifecycle after component props or states update. Some libraries need to know when the DOM is updated. Some other libraries need to prevent the DOM elements from updating.

Usually, component state variables change when a normal user interacts with the component such as pressing a button. This can be achieved using this.setState function. Props are used to pass data from the parent component down to the child component.

Sometimes, we need to fetch data from the server and the data is read after the component is mounted on (written to) the DOM. Accordingly, the component updates the DOM when the data is finished fetching from the server either updating States or Props.

A class component is an ES6 class that extends React's Component.

// This is a basic class component which only displays message in h1 tag.
import React from "react";

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Refs

React provides a way for developers to access DOM elements or other React elements. Refs are very handy when integrating with third-party libraries.

import React from "react";

class Datatable extends React.Component {
  render() {
    return (
      <table ref={(el) => (this.el = el)}>
      </table>
    );
  }
}

React Lifecycle Methods

We need to know some lifecycle methods. These lifecycle methods are important for initializing other libraries, destroying components, subscribing and unsubscribing events

1- componentDidMount: it is fired when the element is mounted on the DOM. It is like jquery's $(document).ready().
Usage:

fetching data from the server.
initializing third-party libraries.

componentDidMount() {
  this.$el = $(this.el);
  this.currentTable = this.$el.DataTable({});
}

3- componentDidUpdate: it is fired when the props passed to the component are updated or the method this.setState is called to change the state of the component. This method is not called for the initial render().
Usage:

reload third-party library if props is updated.

componentDidUpdate(prevProps) {
  if (prevProps.children !== this.props.children) {
    // update third-party library based on prop change
  }
}

3- componentWillUnmount: it is fired before the React component is destroyed and unmounted on the DOM.
Usage:

Unsubscribing from events
Destroying third-party library

componentWillUnmount() {
}

4- shouldComponentUpdate: it is used to avoid the React component from re-rendering. It prevents to update the DOM even if the state or props are updated.
Usage:

Some libraries require an un-changeable DOM.

shouldComponentUpdate() {
  return false;
}

Setup

We use create-react-app boilerplate to set up a React.js project using. The bellow will create React.js app and then start it.

npx create-react-app react-integrations
cd react-integrations
npm start

We will remove the application from unwanted files that comes with the boilerplate like index.css, app.css, and logo.js.

Datatables - Integrations

Datatables.js is a free JQuery plugin that adds advanced controls to HTML tables like searching, sorting, and pagination.

Need to install a couple of dependencies from npm: jquery and datatables.net

npm i -S jquery datatables.net

Add a link to DataTable.css file in index.html.

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />

Create a class component named DataTable inside components/DataTable.js.
Import the libraries:

var $ = require("jquery");
$.DataTable = require("datatables.net");

Inside the render() method, we need to have a table element with a ref. It looks like an html ID, we use it for selecting (referencing) it.
We need to render children props inisde the tbody which is passed by the parent element.

render() {
  return (
    <table ref={(el) => (this.el = el)}>
      <thead>
        <tr>
          <th>#</th>
          <th>Title</th>
          <th>Completed</th>
          <th></th>
        </tr>
      </thead>
      <tbody>{this.props.children}</tbody>
    </table>
  );
}

Inside the componentDidMount() method, we need to get the ref and call jquery method DataTable()

componentDidMount() {
  this.$el = $(this.el);
  this.currentTable = this.$el.DataTable();
}

Inside the componentDidUpdate(prevProps), we refresh the datatable by calling ajax.reload() when the props are updated. According to datatable.js, this method refreshes the table.

componentDidUpdate(prevProps) {
  // It means that only when props are updated
  if (prevProps.children !== this.props.children) { 
    this.currentTable.ajax.reload();
  }
}

Finally, inside componentWillUnmount() we destroy the table.

componentWillUnmount() {
  this.currentTable.destroy();
}

Using the DataTable component in our react application.

import React from "react";
import DataTable from "./components/DataTable";

class App extends React.Component {
  state = {
    todos: [],
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) =>
        this.setState({
          todos: data,
        })
      );
  }

  render() {
    return (
      <DataTable>
        {this.state.todos.map((todo) => (
          <tr key={todo.id}>
            <td>{todo.id}</td>
            <td>{todo.title}</td>
            <td>{todo.completed ? "Yes" : "No"}</td>
            <td>
              <button>Edit</button>
              <button>Delete</button>
            </td>
          </tr>
        ))}
      </DataTable>
    );
  }
}

export default App;

Conclusion

We have learnt how to use a third-party library like DataTable.js inside React.js. I have plans to post more examples in the future like select2. Please comment below and mention the name of the libraries if you like me to post about.

Building APIs Using Express.JS

bewarusman — Sat, 14 Nov 2020 08:10:34 +0000

Summary

In this post, I will show you how to build a blog web API in Node.JS. This tutorial uses Express.JS for handling HTTP requests and Mongodb for storing data.

Introduction
Setup
Database
MVC Structure
Express Application
Complete Example
Conclusion

Introduction

Node.JS is a platform used for building server side applications using Javascript. With Node.JS, developers are able to build backend APIs in minutes. It has a great community and a huge set of packages. These packages help the developers for building great applications. Developers does not require to build everything from scratch. We mainly focus on two packages. First is Express.JS, which is one of the most used packages by developers to build web APIs. Second is mongoose, which is used to simplify the communication between Node.JS and MongoDB.

Requirements

Basic Javascript Knowledge
Node.JS 10.0.0 or higher
NPM 4.6.1 or higher
Mongodb 4.2.1 or higher
VS-Code or any other editor

Setup

A typical Node.JS application has a root directory which contains at least two files package.json (holds metadata about the application and required npm packages), and index.js file (a javascript entry file).

Create the directory of the project

mkdir blog-server
cd blog-server

Create package.json file

npm init -y

Create index.js file (entry file)

// index.js
const PORT = 3000;
console.log(`A node.js server that runs on ${PORT}`);

Run the application

node index.js

Packages

Our express.js web application requires these packages.

express: routing and middleware web framework
cors: enables CORS (cross-origin resource sharing)
body-parser: parses json body into javascript object
morgan: log http requests, important for seeing the request
mongoose: mongodb ORM
nodemon: eases development by restarting the server on any change

NOTE: nodemon is used as a dev-dependency because it is required only during the development time.

Install packages from NPM.

npm install --save-dev nodemon
npm install --save express cors body-parser morgan mongoose

Import packages using require inside index.js file.

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const morgan = require("morgan");
const mongoose = require("mongoose");

Database

As mentioned above, we are using Mongodb for storing application related information. We use mongoose as object mapper between Mongodb and node.js application models.

Connect to mongodb

mongoose.connect("mongodb://localhost:27017/blog");

Create mongoose schema to define the structure of the document that is read from or write to Mongodb. Create a schema named postSchema to define the structure of posts, which it has title and body.

const postSchema = new mongoose.Schema(
   {
      title: { type: String, required: true },
      body: { type: String, required: true },
   },
   { timestamps: true }
);

MVC Like Application

An MVC app is structured into three layers [models, views, controllers]. Sometimes, extra layers are added to MVC such as DAL, Services, Repositories.
In this example, the app is divided into three layers [models → services →controllers]. Usually, each layer exists in a directory.

Models

Models represent domain specific data. The model is based on postSchema defined above.

create a Post model.

const Post = mongoose.model("post", postSchema);

Services

Service layer is an additional layer in MVC that mediates communication between a Controller and a Model. This layer adds more abstractions and ease of testability.
Create a postService entity which exposes two services:

find: to query all post data
save: to save a post

const postService = {

   find: () => Post.find({}),

   save: async (postData) => {
      const post = new Post({ ...postData });
      await post.save();
      return post;
   },
};

Controllers

Controllers as the name implies, controls the incoming request, catches errors and sends back a response to the client.
Create a postController which it has two actions:

find: handles GET /api/posts
save: handles POST /api/posts

const postController = {

  find: async (req, res, next) => {
      try {
         const posts = await postService.find({ ...req.query });
         res.json(posts);
      } catch (error) {
         error.msg = "failed to retrieve posts";
         next(error);
      }
   },

   save: async (req, res, next) => {
      try {
         const post = await postService.save(req.body);
         res.json(post);
      } catch (error) {
         error.msg = "failed to create post";
         next(error);
      }
   },
};

Express Application

Express is a routing and middleware web framework that has minimal functionality of its own: An Express application is essentially a series of middleware function calls.

Create an express application

const app = express();
Middlewares
Middlewares are functions executed before or after the controller actions.
app.use(cors());
app.use(morgan("tiny"));
app.use(bodyParser.json());

Express Router

The express router route the request to a specific action in the controller.
Define two routes based on Express Router to handle

GET /api/posts
POST /api/posts

const router = express.Router();
router.get("/posts", postController.find);
router.post("/posts", postController.save);
app.use("/api", router);

Complete Example

I have included a complete express server example.

Conclusion

You have learnt in detail, how to create an express server and connect to mongodb for storing data. You have exposed some APIs. In this tutorial I have written all code in one file for simplicity. You can visit this repository for the complete example.

Forem: bewarusman

React - Integrating with Third-Party Libraries

Summary

Introduction

Class Components

Refs

React Lifecycle Methods

Setup

Datatables - Integrations

Conclusion

Building APIs Using Express.JS

Summary

Table Of Contents

Introduction

Requirements

Setup

Packages

Database

MVC Like Application

Models

Services

Controllers

Express Application

Express Router

Complete Example

Conclusion