React — Integrating with Third-Party Libraries

Image for post
Image for post

Summary

Introduction

Class Components

Refs

React Lifecycle Methods

componentWillUnmount() {
}
shouldComponentUpdate() {
return false;
}

Setup

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

Datatables — Integrations

npm i -S jquery datatables.net
<link rel=”stylesheet” href=”https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
var $ = require(“jquery”);
$.DataTable = require(“datatables.net”);
componentDidMount() {
this.$el = $(this.el);
this.currentTable = this.$el.DataTable();
}
componentDidUpdate(prevProps) {
// It means that only when props are updated
if (prevProps.children !== this.props.children) {
this.currentTable.ajax.reload();
}
}
componentWillUnmount() {
this.currentTable.destroy();
}

Conclusion

Software Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store