Here we want to present you the steps to take if you want to integrate a pure JavaScript library into a native React application. We follow the guidelines set in the official React tutorial ‘Integrating with Other Libraries’ (https://reactjs.org/docs/integrating-with-other-libraries.html). This tutorial uses the RealTimeChart sample (https://mindfusion.eu/samples/javascript/chart/RealTimeStockChart/RealTimeStockChart.html) that MindFusion has developed for JavaScript and creates, from scratch, the same chart in React. We use again the JavaScript library for Charts and Gauges by MindFusion (https://mindfusion.eu/javascript-chart.html).

A Real-time Financial Chart in React
A Real-time Financial Chart in React

The steps described bellow are universal and you can follow them if you want to integrate any JS library into your React component.

I. Create a React…

In this article we will look at the steps you need to make to create an interactive online application for creating sequence of events diagrams. We will use MindFusion Diagramming library for JavaScript.

You can run the application from here.

And here is how the final version looks:

Image for post
Image for post
Sequence of events diagram built with MindFusion Diagramming for JavaScript library

I. General Setup

We start by creating an empty directory for the project and adding there the two JavaScript files from the Js Diagram library that we will need: MindFusion.Diagramming.js and MindFusion.Common.js

Golemija

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