用WijmoJS玩轉您的Web應用—React

　　前文回顧

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

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

　　同樣是前端框架，為何你如此優秀?

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

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

　　WijmoJS VS React

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

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

　　1.安裝適當的CLI(命令行界面實用程序)以生成，運行，維護和部署應用程序。

　　2.使用CLI創建應用程序。

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

　　4.導入您要使用的組件并添加適當的標記。

　　第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 Wijmoh1>

　　header>

　　<p className="App-intro">

　　To get started, edit <code>src/App.jscode> 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組件，以便您可以更輕松地使用兩個或多個框架，或者在未來隨意切換框架。