如何在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可以看到效果了：

本文來自雲栖社群合作夥伴“汪子熙”，了解相關資訊可以關注微信公衆号"汪子熙"。