用WijmoJS搭建您的前端Web應用 —— React

前文回顧

在本系列文章中，咱們已經介紹了Angular和Vue框架下 WijmoJS 的玩法。

而今天，咱們將展現如何使用 WijmoJS 來搭建一款具有獨特創新性、出色性能和簡單代碼邏輯的 React 應用。

React簡介

因爲React設計思想極其獨特，屬於革命性創新，即只利用簡單的代碼邏輯，實現出衆的性能。自13年開源以來，被愈來愈多的人關注和使用，甚至認爲它多是未來 Web 開發的主流工具。

React主要用於構建UI。你能夠在React裏傳遞多種類型的參數，如聲明代碼。React能夠幫助你渲染出UI和靜態的HTML DOM元素。固然，你也能夠傳遞動態變量、甚至是可交互的應用組件。其衍生的 React Native 項目（不清楚RN是什麼的，請點擊這裏），目標更是宏偉：用寫 Web App 的方式去寫 Native App。相信一旦RN技術發展成熟，整個互聯網行業都會被顛覆，同一組人只須要寫一次 UI ，就能同時運行在服務器、瀏覽器和手機中。那麼，一樣是獨具前瞻性的純前端控件集WijmoJS，怎能不提早採起行動，擁抱整個行業的將來？

WijmoJS VS React

本文，咱們將向你展現如何將WijmoJS添加到用React編寫的簡單應用程序中。

在框架中建立和維護應用程序的基本步驟以下：

l 安裝適當的CLI（命令行界面實用程序）以生成，運行，維護和部署應用程序。

l 使用CLI建立應用程序。

l 使用NPM將Wijmo添加到應用程序。

l 導入您要使用的組件並添加適當的標記。

第1步，建立一個新的React應用程序
按照如下步驟建立一個新的React應用，啓動並運行：

第2步，添加WijmoJS模塊
在VS Code中打開「src / App.js」文件並導入你想要使用的元素。在這裏，咱們將導入WijmoJS的css樣式以及CollectionView，FlexGrid，FlexChart和FlexChartSeries組件。

    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 {

 

本段代碼除了導入咱們想要的WijmoJS模塊外，還會自動匹配WijmoJS許可證密鑰從應用程序中刪除保護水印。

第3步，向控件添加數據
如今你已經能夠在應用程序中使用WijmoJS了。爲了幫助演示，讓咱們開始給應用程序一些基礎數據。

    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() {
    
    // …

 

本段代碼的目的是：將「數據」成員添加到App組件中。

注意getData返回一個CollectionView而不是一個常規數組。 CollectionView類支持排序，篩選，分組，貨幣和通知。 在這個例子中，咱們將它用做網格和圖表的數據源。

第4步，將React控件添加到應用程序
將表格和圖表添加到應用程序，請編輯「src / App.js」文件，以下所示。

    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>
    
        );
    
      }
    
    }

 

第5步，更新樣式表

在保存文件以前，編輯「src / App.css」文件以定義「App-panel」元素使用的佈局。

     .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); }
    
    }

 

第6步，在瀏覽器中運行
如今按ctrl + S保存更改並切換回瀏覽器以查看更改的結果：

因爲表格和圖表綁定到同一個CollectionView，所以對錶格中的數據所作的任何更改都會自動反映在圖表中。 例如，您能夠單擊列標題對數據進行排序或使用鍵盤編輯一些值。

總結

1. 將WijmoJS集成到現代JavaScript應用程序中只須要使用NPM進行安裝並從庫中導入所需的組件便可。
2. 使用WijmoJS可以確保Web應用在不一樣的框架中使用徹底相同的UI組件，以便您能夠更輕鬆地使用兩個或多個框架，或者在將來隨意切換框架。