摘要：關于作為一款純前端控件集，秉承快如閃電，觸控優(yōu)先的設計理念，在提供優(yōu)質(zhì)服務和產(chǎn)品的同時，專注于企業(yè)應用開發(fā)，不斷優(yōu)化產(chǎn)品架構，與時俱進。靈活的為用戶提供易用輕松的操作體驗，全面滿足開發(fā)所需，是構建企業(yè)應用程序最完整的純前端控件集。

在《用 WijmoJS 玩轉(zhuǎn)您的Web應用》系列文章中，我們已經(jīng)介紹了Angular和Vue框架下 WijmoJS 的玩法。

而今天，我們將展示如何使用 WijmoJS 來搭建一款具備獨特創(chuàng)新性、出色性能和簡單代碼邏輯的 React 應用。

由于React設計思想極其獨特，屬于革命性創(chuàng)新，即只利用簡單的代碼邏輯，實現(xiàn)出眾的性能。自13年開源以來，被越來越多的人關注和使用，甚至認為它可能是將來 Web 開發(fā)的主流工具。

React主要用于構建UI。你可以在React里傳遞多種類型的參數(shù)，如聲明代碼。React可以幫助你渲染出UI和靜態(tài)的HTML DOM元素。當然，你也可以傳遞動態(tài)變量、甚至是可交互的應用組件。其衍生的 React Native 項目（不清楚RN是什么的，請點擊這里），目標更是宏偉：用寫 Web App 的方式去寫 Native App。相信一旦RN技術發(fā)展成熟，整個互聯(lián)網(wǎng)行業(yè)都會被顛覆，同一組人只需要寫一次 UI ，就能同時運行在服務器、瀏覽器和手機中。那么，同樣是獨具前瞻性的純前端控件集WijmoJS，怎能不提前采取行動，擁抱整個行業(yè)的未來？

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

在框架中創(chuàng)建和維護應用程序的基本步驟如下：

l 安裝適當?shù)腃LI（命令行界面實用程序）以生成，運行，維護和部署應用程序。

l 使用CLI創(chuàng)建應用程序。

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

l 導入您要使用的組件并添加適當?shù)臉擞洝?/p>

第1步，創(chuàng)建一個新的React應用程序
按照以下步驟創(chuàng)建一個新的React應用，啟動并運行：

第2步，添加WijmoJS模塊
在VS Code中打開“src / App.js”文件并導入你想要使用的元素。在這里，我們將導入WijmoJS的css樣式以及CollectionView，F(xiàn)lexGrid，F(xiàn)lexChart和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步，向控件添加數(shù)據(jù)
現(xiàn)在你已經(jīng)可以在應用程序中使用WijmoJS了。為了幫助演示，讓我們開始給應用程序一些基礎數(shù)據(jù)。

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

本段代碼的目的是：將“數(shù)據(jù)”成員添加到App組件中。

注意getData返回一個CollectionView而不是一個常規(guī)數(shù)組。 CollectionView類支持排序，篩選，分組，貨幣和通知。 在這個例子中，我們將它用作網(wǎng)格和圖表的數(shù)據(jù)源。

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

    class App extends Component {
    
      constructor(props) {
    
        // … no change
    
      }
    
      getData() {
    
        // no change
    
      }
    
      render() {
    
        return (
    
          

    
            

    
              
    
              
Welcome to React and Wijmo
    
            
    
            

    
              To get started, edit src/App.js and save to reload.
    
            
    
            

    
              
    
              
    
                
    
                
    
                
    
              
    
            
    
          
    
        );
    
      }
    
    }

第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步，在瀏覽器中運行
現(xiàn)在按ctrl + S保存更改并切換回瀏覽器以查看更改的結(jié)果：

由于表格和圖表綁定到同一個CollectionView，因此對表格中的數(shù)據(jù)所做的任何更改都會自動反映在圖表中。 例如，您可以單擊列標題對數(shù)據(jù)進行排序或使用鍵盤編輯一些值。

將WijmoJS集成到現(xiàn)代JavaScript應用程序中只需要使用NPM進行安裝并從庫中導入所需的組件即可。

使用WijmoJS能夠確保Web應用在不同的框架中使用完全相同的UI組件，以便您可以更輕松地使用兩個或多個框架，或者在未來隨意切換框架。

作為一款純前端控件集，WijmoJS 秉承“快如閃電，觸控優(yōu)先”的設計理念，在提供優(yōu)質(zhì)服務和產(chǎn)品的同時，專注于企業(yè)應用開發(fā)，不斷優(yōu)化產(chǎn)品架構，與時俱進。除在全球率先支持 AngularJS 外，現(xiàn)已全面應用于 React、Vuejs、TypeScript 、Ionic 等主流框架中。

憑借先進的觸控設計和全面的 AngularJS 支持，WijmoJS 的 FlexGrid 和圖表控件更專注于頂級性能和零依賴性。靈活的 API 為用戶提供易用、輕松的操作體驗，全面滿足開發(fā)所需，是構建企業(yè)應用程序最完整的純前端控件集。