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

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

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

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

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

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

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

l 安裝適當(dāng)?shù)腃LI（命令行界面實(shí)用程序）以生成，運(yùn)行，維護(hù)和部署應(yīng)用程序。

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

l 使用NPM將Wijmo添加到應(yīng)用程序。

l 導(dǎo)入您要使用的組件并添加適當(dāng)?shù)臉?biāo)記。

第1步，創(chuàng)建一個(gè)新的React應(yīng)用程序
按照以下步驟創(chuàng)建一個(gè)新的React應(yīng)用，啟動(dòng)并運(yùn)行：

第2步，添加WijmoJS模塊
在VS Code中打開“src / App.js”文件并導(dǎo)入你想要使用的元素。在這里，我們將導(dǎo)入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 {

本段代碼除了導(dǎo)入我們想要的WijmoJS模塊外，還會自動(dòng)匹配WijmoJS許可證密鑰從應(yīng)用程序中刪除保護(hù)水印。

第3步，向控件添加數(shù)據(jù)
現(xiàn)在你已經(jīng)可以在應(yīng)用程序中使用WijmoJS了。為了幫助演示，讓我們開始給應(yīng)用程序一些基礎(chǔ)數(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返回一個(gè)CollectionView而不是一個(gè)常規(guī)數(shù)組。 CollectionView類支持排序，篩選，分組，貨幣和通知。 在這個(gè)例子中，我們將它用作網(wǎng)格和圖表的數(shù)據(jù)源。

第4步，將React控件添加到應(yīng)用程序
將表格和圖表添加到應(yīng)用程序，請編輯“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步，在瀏覽器中運(yùn)行
現(xiàn)在按ctrl + S保存更改并切換回瀏覽器以查看更改的結(jié)果：

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

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

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

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

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