怎么用React开发SAP Fiori应用

59次阅读

共计 1662 个字符，预计需要花费 5 分钟才能阅读完成。

本篇内容主要讲解“怎么用 React 开发 SAP Fiori 应用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让丸趣 TV 小编来带大家学习“怎么用 React 开发 SAP Fiori 应用”吧!

SAP 官方 Github 上，对 UI5 Web Component 的定义是：借助它，可以使用自己喜欢的前端框架来开发 SAP Fiori 应用。

SAP/ui5-webcomponents

因为 Jerry 之前的文章尝试过 Vue，本文就换成用 React 来演示。

打开 UI5 Web Component for React 的官网，可以看到所有可用的 React Component. React 开发人员可以像使用 React 原生 Component 完全一致的方式来使用这些 SAP 包装过的 React 组件。

Storybook

随便浏览一下，能发现 SAP 提供了丰富的针对 React 使用的 Component 库：

选中每个框架，点击 Docs，就能看到在 React 应用里导入这些 Component 的源代码：

import {BarChart} from @ui5/webcomponents-react-charts/lib/BarChart

这和导入 React 原生的 Component 方法没有区别。如此一来，一个掌握了 React 开发技能的技术人员，几乎不需要任何学习成本，就能迅速上手使用这些 SAP 提供的 Component 来开发 Fiori 应用。所有和 User Experience 相关的因素，应用开发人员都无需考虑，这一切全部由 SAP UI5 Web Component 包办了。

说了这么多，还是来动手创建一个 Hello World 应用吧。

用命令行基于 SAP 预定义的模板创建一个 react 应用。React 开发的全家桶会自动被该命令创建，给开发人员省去了各种搭建 React 开发环境的负担。

npx create-react-app my-app –template @ui5/cra-template-webcomponents-react

接下来就是纯 React 开发工作了。

创建一个只有一行实现的 React Component：

导入到 React 应用 App.js 里：

然后 npm start，浏览器里就能看到这个 React 应用的效果了。平平无奇，对吗？

那么看看下面这个应用，是不是外观很像 SAP Fiori？

我把该应用的源代码放到了 github 上，下面只简述要点：

wangzixi-diablo/ui5-for-react

这个应用演示的效果在下面的视频里可以看到：

https://7nxo.html

浏览器里一眼就能发现，这个 React 页面用到了 Line Chart 和 List 两个组件，但实际上这个 React 应用还演示了不同 Component 之间的跳转，路由，以及图标的显示等功能，因此导入的组件远远不止 Line Chart 和 List.

下图是从 @ui5/webcomponents 导入的全部组件列表：

以 LineChart 为例，从 @ui5/webcomponents 导入后，采用 React 的语法，和我们在 UI5 原生的 XML 视图里使用 SAP UI5 提供的标签一样的方式，在 React 应用里使用 LineChart 标签：

这个 LineChart 的渲染还是采用 HTML5 的原生标签 canvas 实现：

如果对其实现感兴趣，可以到 node_modules 文件夹下，根据路径 @ui5/webcomponents-react-charts 找到实现源文件，通过阅读源代码来学习：

有了 SAP UI5 Web Component，如今在 Fiori 应用的开发领域里，企业的选择将更加灵活：如果员工前端开发的技术栈还是基于 jQuery，那么可以继续使用 SAP UI5；如果员工本身就是熟练的 React/Angular/Vue 开发者，那么 SAP UI5 Web Component 是一个不错的选择。