前文回憶
在《用 WijmoJS 玩轉您的Web運用》系列文章中，我們已引見了Angular和Vue框架下 WijmoJS 的弄法。
而本日，我們將展現怎樣運用 WijmoJS 來搭建一款具有奇特立異性、精彩機能和簡樸代碼邏輯的 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，因而對錶格中的數據所做的任何變動都邑自動反映在圖表中。 比方，您可以單擊列題目對數據舉行排序或運用鍵盤編輯一些值。
總結
- 將WijmoJS集成到當代JavaScript運用程序中只需要運用NPM舉行裝置並從庫中導入所需的組件即可。
- 運用WijmoJS可以確保Web運用在差別的框架中運用完全相同的UI組件，以便您可以更輕鬆地運用兩個或多個框架，或許在將來隨便切換框架。
關於WijmoJS
作為一款純前端控件集，WijmoJS 秉持“快如閃電，觸控優先”的設想理念，在供應優質服務和產物的同時，專註於企業運用開闢，不停優化產物架構，與時俱進。除在環球領先支撐 AngularJS 外，現已周全運用於 React、Vuejs、TypeScript 、Ionic 等主流框架中。
依附先進的觸控設想和周全的 AngularJS 支撐，WijmoJS 的 FlexGrid 和圖表控件更專註於頂級機能和零依賴性。天真的 API 為用戶供應易用、輕鬆的操縱體驗，周全滿足開闢所需，是構建企業運用程序最完全的純前端控件集。
