用WijmoJS玩轉(zhuǎn)您的Web應(yīng)用—React

　　前文回顧

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

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

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

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

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

　　WijmoJS VS React

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

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

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

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

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

　　4.導(dǎo)入您要使用的組件并添加適當?shù)臉擞洝?/p>

　　第1步，創(chuàng)建一個新的React應(yīng)用程序

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

　　第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模塊外，還會自動匹配WijmoJS許可證密鑰從應(yīng)用程序中刪除保護水印。

　　第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返回一個CollectionView而不是一個常規(guī)數(shù)組。 CollectionView類支持排序，篩選，分組，貨幣和通知。 在這個例子中，我們將它用作網(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 (

　　<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步，在瀏覽器中運行

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

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

　　總結(jié)

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

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