前文回顧

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

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

　　同樣是前端框架，為何你如此優(yōu)秀?

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

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

　　WijmoJS VS React

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

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

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

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

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

　　4.導(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中打開(kāi)“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模塊外，還會(huì)自動(dòng)匹配WijmoJS許可證密鑰從應(yīng)用程序中刪除保護(hù)水印。

　　第3步，向控件添加數(shù)據(jù)

　　現(xiàn)在你已經(jīng)可以在應(yīng)用程序中使用WijmoJS了。為了幫助演示，讓我們開(kāi)始給應(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類(lèi)支持排序，篩選，分組，貨幣和通知。 在這個(gè)例子中，我們將它用作網(wǎng)格和圖表的數(shù)據(jù)源。

　　第4步，將React控件添加到應(yīng)用程序

　　將表格和圖表添加到應(yīng)用程序，請(qǐng)編輯“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步，在瀏覽器中運(yùn)行

　　現(xiàn)在按ctrl + S保存更改并切換回瀏覽器以查看更改的結(jié)果：

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

　　總結(jié)

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

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