How to build React Apps with Wijmo and NPM

Notice: Code examples in this blog use Wijmo modules from the non-scoped ‘wijmo’ npm package. Beginning with Wijmo 2019 v1 release, Wijmo packages are also available in the @grapecity npm scope, and the use of these packages is the recommended for new applications. For the convenience of our customers, we continue publishing new Wijmo builds as non-scoped ‘wijmo’ packages as well.

Read more about Wijmo NPM Package Changes.

Build Angular apps with Wijmo and NPM

In this series, we'll show how you can use Wijmo with NPM and Webpack to create applications targeting the most popular JavaScript application frameworks. This blog focuses on Facebook’s framework React, which calls itself “A JavaScript library for building user interfaces.” It extends JavaScript with an HTML-like syntax for creating components that are combined into applications. Read more about Wijmo's React support.

Blog series

1. Introduction to NPM and Wijmo

2. Angular

3. React

4. Vue.js

5. Ionic

In this tutorial, we won't get into the details of NPM, Webpack, or React itself. All these tools are incredibly popular and thoroughly documented, and you can read our e-book on frameworks for a good overview. Instead, we'll focus on the task of adding Wijmo to simple applications written in React.

The basic steps for creating and maintaining applications are the same in all frameworks:

• Install the appropriate CLI (Command-Line Interface utility) to generate, run, maintain, and deploy applications.

• Use the CLI to create the application.

• Use NPM to add Wijmo to the application.

• Import the components you want to use and add the appropriate markup.

Step 1. Create a new React app

Follow these steps to create a new React app and get it up and running:

You should see the app running in the browser. Let’s start editing the app. When you save changes, the browser will reload the app automatically.

Step 2. Add Wijmo modules

Open the “src/App.js” file in VS Code and import the elements you want to use. In this case, we'll import Wijmo’s css as well as the CollectionView, FlexGrid, FlexChart, and FlexChartSeries components:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// import Wijmo styles and components
import 'wijmo/styles/wijmo.css';
import { CollectionView } from 'wijmo/wijmo';
import { FlexGrid } from 'wijmo/wijmo.react.grid';
import { FlexChart, FlexChartSeries } from 'wijmo/wijmo.react.chart';

// apply Wijmo license key
import { setLicenseKey } from 'wijmo/wijmo';
setLicenseKey('your key goes here'); 

class App extends Component {

In addition to importing the Wijmo modules we want, the code also applies a Wijmo license key to remove the evaluation watermark from the app. If you don’t have a license key, it’s OK to skip this step.

Step 3. Add data to the controls

Now you can use Wijmo in the application. To demonstrate, let’s start by giving the app some state:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      data: this.getData()
    };
  }
  getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < countries.length; i++) {
      data.push({
        country: countries[i],
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000,
        downloads: Math.round(Math.random() * 20000),
      });
    }
    return new CollectionView(data);
  }
  render() {
    // …

This adds a “data” member to the App component’s state.

Notice that getData returns a CollectionView rather than a regular array. The CollectionView class supports sorting, filtering, grouping, currency, and notifications. In this example, we'll use it as a data source for a grid and a chart.

Step 4. Add the React controls to the app

To add the grid and the chart to the app, edit the “src/App.js”file as follows:

class App extends Component {
  constructor(props) {
    // … no change
  }
  getData() {
    // no change
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React and Wijmo</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div className="App-panel">
          <FlexGrid itemsSource={this.state.data}/>
          <FlexChart itemsSource={this.state.data} bindingX="country">
            <FlexChartSeries name="Sales" binding="sales"/>
            <FlexChartSeries name="Expenses" binding="expenses"/>
            <FlexChartSeries name="Downloads" binding="downloads"/>
          </FlexChart>
        </div>
      </div>
    );
  }
}

Step 5. Update the stylesheet

Before saving the file, edit the “src/App.css” file to define the layout to be used by the “App-panel” element:

.App-intro {
  font-size: large;
}

.App-panel {
  margin: 0 48pt;
}
.App-panel .wj-control {
  display: inline-block;
  vertical-align: top;
  width: 400px;
  height: 300px;
}
@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Step 6. Test in the browser

Now press ctrl+S to save the changes and switch back to the browser to see the result of the changes:

Because the grid and the chart are bound to the same CollectionView, any changes made to the data in the grid are automatically reflected in the chart. For example, you may click the column headers to sort the data or edit some values using the keyboard.

Conclusion

Integrating Wijmo into modern JavaScript applications is just a matter of installing it with NPM and importing the components you want from the library.

Being able to use the exact same UI components on different frameworks makes things easier you work with two or more frameworks, or are planning to switch frameworks in the future.