React Hooks - How to Creat an App with Embedded Analytics

React Hooks - How to Creat an App with Embedded Analytics

See how to use Hooks in React. How to Creat an App with Embedded Analytics. Hope this article will satisfy your intellectual curiosity in full and inspire to create your own analytical application that assists in making important business decisions.

You may have noticed that React Hooks, introduced in the React’s 16.8.0 release, have been received by the web dev community very diversely. Some warmly embraced this new way to reuse stateful logic between components, while some strongly criticized it. One thing can be said for sure — React Hooks are an incredibly hot topic now. This is confirmed by the number of articles, tutorials, video courses, and project samples on the subject.

My goal is to briefly introduce to you this powerful concept (if you are not familiar with it yet) and show how it can be applied to building a simple analytical app. Note that we’ll focus more on getting a hands-on experience rather than on debating on the pros and cons of using Hooks.

I do hope this article will satisfy your intellectual curiosity in full and inspire to create your own analytical application that assists in making important business decisions.

Why React Hooks

The central idea behind React Hooks is that you can use React’s features (like states and effects) from functions, without writing classes. Hooks are meant to help you arrange logic inside a component into separate pieces. Ergo, they present a powerful mechanism for code reuse.

Plus, there's no need to worry — you don’t have to rewrite your code from scratch and add hooks everywhere. React Hooks are an experimental and backward-compatible feature that are currently being adopted among web developers.

☝️ Now that we figured out what React Hooks are all about, let’s go ahead and try building an analytical app with React Hooks. 

As a data analysis tool, I’ve chosen Flexmonster Pivot Table & Charts, since it provides a ready-to-use React wrapper based on React Hooks.

To make the process more engaging, we’ll explore the data set from Kaggle, namely Spanish High-Speed Rail tickets pricing - Renfe. To be precise, we’ll aggregate, filter, and sort the data in the pivot table. Afterward, we’ll visualize it with pivot charts. This kind of exploration will help us to capture trends in the data and get a basic understanding of working with a web pivot table. And we’ll do it all in our React app!

Results

After tutorial completion, we’ll end up with a dynamic web-based dashboard displaying metrics inside your React app:

This is image title

Creating a React App and Adding Dependencies

The first step is completely straightforward. All you need to do is to download or clone the project from GitHub. At this point, you should select between ES6 or TypeScript versions of the project. Next, run npm install to download its dependencies.

Alternatively, you can build a single-page app from scratch using the create-react-app environment and go the full way of integrating it with Flexmonster.

If you prefer the first variant, let’s take a closer look at the structure of the sample project and a couple of JS components from the src folder that we'll be using.

  • App.js is the main JavaScript component that is responsible for setting routes of other components and running your app.
  • PivotTableHooks.js renders the instance of a pivot table using the functional approach with hooks.

I'd like to draw your attention to how easy it is to hook React features of Flexmonster into your functional component.

It's as simple as changing the import statement from

import * as FlexmonsterReact from 'react-flexmonster';

to

import * as FlexmonsterReact from 'react-flexmonster/hooks';

Afterward, you can use the pivot table within a function. You can also do this inside a class component, which is PivotTable.js in our sample.

In my mind, such a seamless approach corresponds to the very nature of hooks as a concept and speeds up the development process and helps to keep the code clear.

Note that PivotTable.js and PivotTableHooks.js can be used interchangeably, depending on the logic you like better — a class-based or with hooks.

Empowering the App With a Data Visualization Solution

Now, it’s time to figure out how to work with Flexmonster Pivot. First, we need to configure a report.

Flexmonster’s report has a clear JSON structure. It incorporates information about a data source, a slice (a subset of data that is currently displayed on the grid), visual and functional options, formatting, etc.

Open the PivotTableHooks.js file and define a variable that contains our JSON data:

const data = [
              {
                "insert_date": "2019-04-11 21:49:46",
                "origin": "MADRID",
                "destination": "BARCELONA",
                "start_date": "2019-04-18 05:50:00",
                "end_date": "2019-04-18 08:55:00",
                "train_type": "AVE",
                "price": 68.95,
                "train_class": "Preferente",
                "fare": "Promo"
              },
              {
                "insert_date": "2019-04-11 21:49:46",
                "origin": "MADRID",
                "destination": "BARCELONA",
                "start_date": "2019-04-18 06:30:00",
                "end_date": "2019-04-18 09:20:00",
                "train_type": "AVE",
                "price": 75.4,
                "train_class": "Turista",
                "fare": "Promo"
              },
// …
]

Next, create a variable that holds the report itself:

const report = {
    dataSource: {
        data: data
    },
    "slice": {
        "reportFilters": [{
                "uniqueName": "train_class"
            },
            {
                "uniqueName": "train_type"
            }
        ],
        "rows": [{
            "uniqueName": "origin"
        }],
        "columns": [{
                "uniqueName": "destination"
            },
            {
                "uniqueName": "fare"
            },
            {
                "uniqueName": "[Measures]"
            }
        ],
        "measures": [{
            "uniqueName": "price",
            "aggregation": "average"
        }],
        "expands": {
            "columns": [{
                "tuple": [
                    "destination.[madrid]"
                ]
            }]
        }
    }
};

As an alternative, we can simply pass a string with the report’s URL:

report = "URL-to-report"

Set the report in the pivot table:

<FlexmonsterReact.Pivot ref={ref} toolbar={true} width="100%" report={report} reportcomplete={onReportComplete}/>

To add charts, we need to create a separate instance of Flexmonster and make it display charts with our data. We can do it by creating one more report and setting options.

const report_charts = {
    dataSource: {
        data: data
    },
    "slice": {
        "reportFilters": [{
                "uniqueName": "train_class"
            },
            {
                "uniqueName": "destination"
            },
            {
                "uniqueName": "fare"
            }
        ],
        "rows": [{
            "uniqueName": "train_type"
        }],
        "columns": [{
            "uniqueName": "[Measures]"
        }],
        "measures": [{
            "uniqueName": "price",
            "aggregation": "average",
            "format": "currency"
        }]
    },
    "options": {
        "viewType": "charts",
        "chart": {
            "type": "pie"
        }
    },
    "formats": [{
        "name": "currency",
        "thousandsSeparator": ",",
        "decimalPlaces": 1,
        "currencySymbol": "€"
    }]
};
<FlexmonsterReact.Pivot ref={ref_charts} toolbar={true} width="100%" report={report_charts}/>

After, run npm start and open [http://localhost:3000/hooks](http://localhost:3000/hooks) in your browser.

Now the pivot table component is rendered and filled with the predefined data.

This is image title

Or change the slice with the drag-and-drop feature:

This is image title

And here’s what we’ve got:

A React Hooks application empowered with a custom reporting solution that is ready to be used in any app for tackling all kinds of data analysis challenges.

I encourage you to take some time experimenting with this embedded analytics solution to explore its full potential and discover new insights into the data.

You can also see the React project on GitHub. Any of your feedback or questions would be so much appreciated!

Thank for reading !

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Use MongoDB as a Real-time database with Node.js

Have you ever run into a scenario where you wanted to update your UI as soon as there is some change to your Mongo database

Node.js REST API with Express & MongoDB - Using a MongoDB Database with Node.js

Node.js REST API with Express & MongoDB - Using a MongoDB Database with Node.js. Learn Node.js framework in simple and easy steps starting from basic to advanced concepts with examples including Introduction, Environment Setup, Node Package Manager, Node Callbacks Concept, Node Buffers Module, Node Streams, Node File System, Node Utility Modules, Node Web Module, Node Express Application, Node RESTFul API, Node Scaling Application.

Getting Started with React Native in 2020: Build Your First App

Getting Started with React Native in 2020: Build Your First App. How To Code Your First Mobile App Using React Native. Learn how to build your first React Native app with important basic concepts. Learn the basics of React Native, a JavaScript Native Mobile App compiler. We look into components, events, props and passing them and more.