Shulou(Shulou.com)05/31 Report--

This article focuses on "how to use React to develop SAP Fiori applications", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to develop SAP Fiori applications with React.

On SAP's official Github, UI5 Web Component is defined as: with it, you can use your favorite front-end framework to develop SAP Fiori applications.

SAP/ui5-webcomponents

Because Jerry's previous articles have tried Vue, this article will be demonstrated in React instead.

Open the official website of UI5 Web Component for React and you can see all available React Component. React developers can use these SAP-wrapped React components in exactly the same way that they use React native Component.

Storybook

A casual glance shows that SAP provides a wealth of Component libraries for React:

Select each framework, click Docs, and you can see the source code for importing these Component in the React application:

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

This is no different from importing React's native Component method. In this way, a technician who has mastered React development skills can quickly start using the Component provided by SAP to develop Fiori applications at almost no learning cost. All the factors related to User Experience do not need to be considered by application developers, all of which are handled by SAP UI5 Web Component.

With all that said, let's start creating a Hello World application.

Use the command line to create a react application based on SAP predefined templates. Family buckets developed by React will be automatically created by this command, saving developers the burden of building a React development environment.

Npx create-react-app my-app-- template @ ui5/cra-template-webcomponents-react

Then there is pure React development work.

Create a React Component with only one line implementation:

Import it into the React application App.js:

Then npm start, the browser can see the effect of the React application. It's mediocre, right?

So take a look at the following app, does it look like SAP Fiori?

I put the source code of the application on github. The following is a brief description of the main points:

Wangzixi-diablo/ui5-for-react

The effect of this application demonstration can be seen in the following video:

Https://7nxo.html

You can see at a glance in the browser that this React page uses two components, Line Chart and List, but in fact, the React application also demonstrates the functions of jumping, routing, and icon display between different Component, so the imported components are far more than Line Chart and List.

The following is a list of all the components imported from @ ui5/webcomponents:

Take LineChart as an example. After importing from @ ui5/webcomponents, we use the syntax of React, in the same way we use the tags provided by SAP UI5 in the native XML view of UI5, and use LineChart tags in React applications:

The rendering of this LineChart is still implemented using HTML5's native tag canvas:

If you are interested in its implementation, you can go to the node_modules folder, find the implementation source file according to the path @ ui5/webcomponents-react-charts, and learn by reading the source code:

With SAP UI5 Web Component, enterprises will now have more flexible choices in the field of Fiori application development: if the front-end technology stack developed by employees is still based on jQuery, then they can continue to use SAP UI5; if the employees themselves are skilled React/Angular/Vue developers, then SAP UI5 Web Component is a good choice.

At this point, I believe you have a deeper understanding of "how to develop SAP Fiori applications with React". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.