大佬教程收集整理的这篇文章主要介绍了用WijmoJS搭建您的前端Web应用 —— React，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
在本系列文章中，我们已经介绍了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添加到用React编写的简单应用程序中。
在框架中创建和维护应用程序的基本步骤如下：
l 安装适当的Cli（命令行界面实用程序）以生成，运行，维护和部署应用程序。
l 使用Cli创建应用程序。
l 使用NPM将Wijmo添加到应用程序。
l 导入您要使用的组件并添加适当的标记。
第1步，创建一个新的React应用程序 @H_403_40@
按照以下步骤创建一个新的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() * 5000round(R_273_11845@ath.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步，在浏览器中运行 @H_696_204@
现在按ctrl + S保存更改并切换回浏览器以查看更改的结果：
以上是大佬教程为你收集整理的用WijmoJS搭建您的前端Web应用 —— React全部内容，希望文章能够帮你解决用WijmoJS搭建您的前端Web应用 —— React所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
