专栏首页葡萄城控件技术团队用WijmoJS搭建您的前端Web应用 —— React

用WijmoJS搭建您的前端Web应用 —— React

前文回顾

在本系列文章中,我们已经介绍了AngularVue框架下 WijmoJS 的玩法。

而今天,我们将展示如何使用 WijmoJS 来搭建一款具备独特创新性、出色性能和简单代码逻辑的 React 应用。

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,因此对表格中的数据所做的任何更改都会自动反映在图表中。 例如,您可以单击列标题对数据进行排序或使用键盘编辑一些值。

总结
  1. 将WijmoJS集成到现代JavaScript应用程序中只需要使用NPM进行安装并从库中导入所需的组件即可。
  2. 使用WijmoJS能够确保Web应用在不同的框架中使用完全相同的UI组件,以便您可以更轻松地使用两个或多个框架,或者在未来随意切换框架。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2020年值得你去试试的10个React开发工具

    JavaScript每天都在出现大量的框架和工具,而React是除了上次我们提到的Vue和Ember之外另一款比较流行的框架。但因为新的工具每天都在不断的出现,...

    葡萄城控件
  • 2017年 JavaScript 框架回顾 -- React生态系统

    前一篇文章中,我们介绍了2017年 JavaScript 框架的整体情况。我们也了解到在众多的前端框架中,目前最为庞大又在快速增长的当属 React 了,本文就...

    葡萄城控件
  • 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2)...

    葡萄城控件
  • 01-React搭建react环境及SCSS的配置

    张风捷特烈
  • SpringBoot2.x系列教程(三十五)SpringMVC之ViewResolver及扩展

    在前些章节中我们学习了各类前端模板引擎的页面展示,发现它们的共性时,都实现了ViewResolver接口,并将实现类注入到Spring容器当中。

    用户1161110
  • 【示例】文件行统计分析

    以上程序在Turbo C环境下可直接编译运行。        在程序运行过程中,需要拥护输入一篇文章,文章结束请按ctrl+z,此时屏幕上出现 ^z,回车即可...

    鲁郭大侠
  • React多页面应用4(webpack4 提取第三方包及公共组件)

    本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

    前端人人
  • 【前端艺术】纯CSS3鼠标hover图片条纹遮罩层动画效果源码

    这是一款纯CSS3鼠标hover图片条纹遮罩层动画特效。该特效在鼠标悬停图片上面时,背景遮罩层变形为棱形,中间显示图片,旁边是紫色条纹。同时展示图片的描述文字和...

    用户5997198
  • ABB机器人基础培训资料整理与总结

    之前对机械臂了解较少,这方面知识比较匮乏。只使用过PowercCube六自由度机械臂。

    zhangrelay
  • Couchbase 中的分布式储存Couchbase 中的分布式储存概述数据储存数据分布复制容错分布式协议跨机房部署Couchbase的分布式及理论总结参考

    Couchbase 是一个具有高性能、可扩展性和可 用性强的数据库引擎。它可以让开发人员通过 NoSQL 的键值存储(二进制或者JSON)或者使用 N1QL 的...

    一个会写诗的程序员

扫码关注云+社区

领取腾讯云代金券