如何在SAP Fiori应用里使用React component

在MyApp.jsx里引入UI5针对React框架的开发的Card web Component：

代码如下：


import React from 'react'
import { Card } from "@ui5/webcomponents-react";export function MyApp() {return (<div><Card heading="Card"></Card></div>);
}

然后和正常的React应用一样，在App.js里引入我们自定义的Component：

代码如下：

import React from "react";
import { MyApp } from "./MyApp";
import { ThemeProvider } from "@ui5/webcomponents-react/lib/ThemeProvider";function App() {return (<ThemeProvider withToastContainer><MyApp /></ThemeProvider>);
}export default App;

这个Card Component是SAP发布的针对React框架的标准组件。

可以在这个链接里看到明细：

https://sap.github.io/ui5-webcomponents-react/?path=/story/welcome-getting-started–page

开发完毕后，npm start可以看到效果了：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

如何在SAP Fiori应用里使用React component相关推荐

SAP UI5 应用开发教程之四十八 - 如何在 SAP UI5 应用里开发条形码扫描功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
如何在 SAP UI5 应用里显示 PDF 文件试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年12月23日为止,目前已经更新了 155 篇,专栏完成度为 51.6%,完成度已经超过了一半了. ...
SAP UI5 应用开发教程之五十九 - 如何在 SAP UI5 应用里显示世界地图试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP Fiori 应用里图标(Icon)的渲染原理和使用技巧
这是 Jerry 2021 年的第 27 篇文章,也是汪子熙公众号总共第 298 篇原创文章. 近日,一位 SAP 合作伙伴的开发人员,向我咨询一个关于 SAP Fiori 应用里图标的使用问题. 这 ...
如何分辨 SAP Fiori Launchpad 里的真假 Fiori 应用
这是Jerry 2021年的第 23 篇文章,也是汪子熙公众号总共第 294 篇原创文章. 本文标题里的"真假" Fiori 应用,改成业内术语应该是:基于 SAP UI5 的原生 ...
如何将自开发的SAP UI5应用以tile的方式配置到SAP Fiori Launchpad里
使用一个具有Business Role SAP_CORE_BC_EXT的用户登录S/4HANA: 在Custom Catalog Extensions tile里搜索需要配置到SAP Fiori La ...
把经典的ABAP webdynpro应用配置到SAP Fiori Launchpad里
假设我们在ES5系统里有一个ABAP webdynpro应用,想配置到SAP Fiori Launchpad里,首先在SAP Cloud Platform上创建一个Destination,指向ES5: ...
一步步把SAP GUI的事务码配置到SAP Fiori Launchpad里
今天是2020年1月31日鼠年大年初七,这是Jerry鼠年的第7篇文章,也是汪子熙公众号总共第206篇原创文章. Jerry之前的文章为什么SAP GUI里的传统事务码能通过Fiori Launch ...

如何在SAP Fiori应用里使用React component

如何在SAP Fiori应用里使用React component相关推荐

最新文章

热门文章