Developing a simple web application using UI5 web Components for React

Introduction

React has grown in popularity over the years. Popular websites which we see in our day to day life uses React for the UI. Applications that use react are high in performance when compared to traditional technologies. This is mainly due to the use of virtual DOM which is a lightweight version of old DOM.

When you start developing applications in React it could be quite overwhelming if you jump directly into the application development. We have to understand the basics of React concepts in-order to make our web development process fun and interesting.

UI5 Web component

When we are new to UI development writing everything from the scratch will be tiresome. To make our lives easier, UI5 web components provides an SAP Fiori-compliant implementation by leveraging UI5 web components project. With this we can import several components such as card, button, calendar, Date Picker, Combo box and can use it directly in our web page easily without much effort in designing.

The below mentioned tutorial will help us in getting started with UI5 web components and react.

Get Started with UI5 Web Components for React

Though there are advanced concepts in react, basic understanding of components will help us to get started with creating our own web-page. We will see more information about components in the upcoming sections of this post.

Component

This is the building block of the web page in react. If you are familiar with HTML then you will be aware of elements. We will have different kinds of elements such as head, title, body etc. in HTML  and with the help of these elements we will build our web-page. Component will contain a group of elements which will be reused in the web page. For example, when we see a post in instagram or twitter, all the posts will have similar structure. Hence, post can be considered as a component. Elements such as post image, description, comments can be considered as a part of the post component. UI5 web components provides reusable code which we can use in our application to build web pages.

This is the sample application that  we are going to create in this blog post,

Lets understand, how different components are used in the design here,

ShellBar

This component is used in creating application header. We can add logo, icon, search field and many such fields in the header.  Remember to add the image you use here in the public folder of the application

 <ShellBar
        logo={<img src="logo192.png" />}
        primaryTitle="Sample Application with UI5 Web Components for react"
  />

Card 

Card component is used to created courses in our sample web page. It has header and content sections. Header contains the course name and in the content area we have course related information. Avatar component is used to add images specified size and shape. List component helps us to display a list of items.

<Card
          heading="UI5 fundamentals"
          style={{ width: "350px", ...spacing.sapUiContentPadding }}
        >
          <Avatar
            style={{ width: "400px", height: "200px" }}
            image="https://imgproxy.xopic.de/hkHnHVJVAo9b_pI6VL7R98CSS1a39xnsSuPAwPIz4Fg/fit/600/300/ce/false/aHR0cHM6Ly9zMy54/b3BpYy5kZS9vcGVu/c2FwLXB1YmxpYy9j/b3Vyc2VzLzVidzBO/ZWFxemJXTHhaaTRu/V2FBSi92aXN1YWxf/djEuanBn.jpg"
            shape="Square"
            size="XL"
          />

          <List>
            <Text style={spacing.sapUiContentPadding}>
              This course teaches about fundamentals of UI5 components which can
              be used to develop your application. You will learn about
              different components in this course
            </Text>
            <StandardListItem
              info="in progress"
              infoState={ValueState.Warning}
              style={{ height: "80px" }}
            >
              <FlexBox direction={FlexBoxDirection.Column}>
                <ProgressIndicator value={89} valueState={ValueState.Success} />
              </FlexBox>
            </StandardListItem>
          </List>
          <Button
            className=""
            icon="employee"
            onClick={function noRefCheck() {}}
            slot=""
            style={{}}
            tooltip=""
          >
            Enter course
          </Button>
  </Card>

FlexBox

This is used to create flexible layout in our application. With the JustifyContent property we can justify the contents of the component.

<FlexBox
        justifyContent={FlexBoxJustifyContent.Center}
        wrap={FlexBoxWrap.Wrap}
        style={spacing.sapUiContentPadding}
 />

Now that we covered the details about components, we can extend this code and add this to our application. Our first simple web-page is now ready to leverage the features of UI5 and React.

Code for the application:

Add the following code in your App.js file

function App() {
  return (
    <ThemeProvider>
      <MyApp />
    </ThemeProvider>
  );
}

export default App;

Add this code in MyApp.jsx file

import React from "react";
import {
  Avatar,
  Card,
  Text,
  ShellBar,
  List,
  StandardListItem,
  ValueState,
  ProgressIndicator,
  FlexBox,
  FlexBoxJustifyContent,
  FlexBoxWrap,
  FlexBoxDirection,
} from "@ui5/webcomponents-react";
import { spacing } from "@ui5/webcomponents-react-base";
import "@ui5/webcomponents-icons/dist/list.js";
import { Button } from "@ui5/webcomponents-react/lib/Button";

export function MyApp() {
  return (
    <div>
      <ShellBar
        logo={<img src="logo192.png" />}
        primaryTitle="Sample Application with UI5 Web Components for react"
      ></ShellBar>
      <FlexBox
        justifyContent={FlexBoxJustifyContent.Center}
        wrap={FlexBoxWrap.Wrap}
        style={spacing.sapUiContentPadding}
      >
        <Card
          heading="UI5 fundamentals"
          style={{ width: "350px", ...spacing.sapUiContentPadding }}
        >
          <Avatar
            style={{ width: "400px", height: "200px" }}
            image="https://imgproxy.xopic.de/hkHnHVJVAo9b_pI6VL7R98CSS1a39xnsSuPAwPIz4Fg/fit/600/300/ce/false/aHR0cHM6Ly9zMy54/b3BpYy5kZS9vcGVu/c2FwLXB1YmxpYy9j/b3Vyc2VzLzVidzBO/ZWFxemJXTHhaaTRu/V2FBSi92aXN1YWxf/djEuanBn.jpg"
            shape="Square"
            size="XL"
          />

          <List>
            <Text style={spacing.sapUiContentPadding}>
              This course teaches about fundamentals of UI5 components which can
              be used to develop your application. You will learn about
              different components in this course
            </Text>
            <StandardListItem
              info="in progress"
              infoState={ValueState.Warning}
              style={{ height: "80px" }}
            >
              <FlexBox direction={FlexBoxDirection.Column}>
                <ProgressIndicator value={89} valueState={ValueState.Success} />
              </FlexBox>
            </StandardListItem>
          </List>
          <Button
            className=""
            icon="employee"
            onClick={function noRefCheck() {}}
            slot=""
            style={{}}
            tooltip=""
          >
            Enter course
          </Button>
        </Card>

        <Card
          heading="React Native App Development"
          style={{ width: "350px", ...spacing.sapUiContentPadding }}
        >
          <Avatar
            style={{ width: "400px", height: "200px" }}
            image="https://imgproxy.xopic.de/AtO16nRekPG_IiJFQtisLfgjygcaEvgrge_2_xdimpM/fit/600/300/ce/false/aHR0cHM6Ly9zMy54/b3BpYy5kZS9vcGVu/c2FwLXB1YmxpYy9j/b3Vyc2VzLzdqUWVQ/Rklxb3c5NXd1NlVD/bUhmS2MvdmlzdWFs/X3YyLmpwZw.jpg"
            shape="Square"
            size="XL"
          />

          <Text style={spacing.sapUiContentPadding}>
            This course is about fundamentals of React Native. Its an
            open-source mobile application framework.In this course you will
            develop an android application with the instrutor.
          </Text>
          <List>
            <StandardListItem
              info="in progress"
              infoState={ValueState.Warning}
              style={{ height: "80px" }}
            >
              <FlexBox direction={FlexBoxDirection.Column}>
                <ProgressIndicator value={10} valueState={ValueState.Success} />
              </FlexBox>
            </StandardListItem>
          </List>
          <Button
            className=""
            icon="employee"
            onClick={function noRefCheck() {}}
            slot=""
            style={{}}
            tooltip=""
          >
            Enter course
          </Button>
        </Card>
        <Card
          heading="Kubernetes and Docker essentials"
          style={{ width: "350px", ...spacing.sapUiContentPadding }}
        >
          <Avatar
            style={{ width: "400px", height: "200px" }}
            image="https://imgproxy.xopic.de/cDTLl5fXaXcrOHPhSd0FawuLBUVykpEZi0I-275Qb5c/fit/600/300/ce/false/aHR0cHM6Ly9zMy54/b3BpYy5kZS9vcGVu/c2FwLXB1YmxpYy9j/b3Vyc2VzLzJHQjRO/UVBzNk5HbVRoWVpn/cU5hc2gvdmlzdWFs/X3YxLmpwZw.jpg"
            shape="Square"
            size="XL"
          />
          <Text style={spacing.sapUiContentPadding}>
            Kubernetes is a container management system to manage a
            containerized application in various environments. In this course
            you will get hands on experience in deploying an application.
          </Text>
          <List>
            <StandardListItem
              info="in progress"
              infoState={ValueState.Warning}
              style={{ height: "80px" }}
            >
              <FlexBox direction={FlexBoxDirection.Column}>
                <ProgressIndicator value={50} valueState={ValueState.Success} />
              </FlexBox>
            </StandardListItem>
          </List>
          <Button
            className=""
            icon="employee"
            onClick={function noRefCheck() {}}
            slot=""
            style={{}}
            tooltip=""
          >
            Enter course
          </Button>
        </Card>
      </FlexBox>
    </div>
  );
}

Conclusion

In this blog post we have seen, how to create a simple web page by using UI5 web components such as ShellBar, Card, Avatar, List and FlexBox. You can read about more components in this Story Book and you can use them to create more advanced web-pages. You can also customize the styles using CSS varaibles.

As we are coming to the end of the post, I have a question to the readers, in the above code snippet we are repeating the code for card component thrice. How can we refactor this code using props concept? Is there any other ways in which we can optimize the code? Let me know your answers in the comments section below 🙂

Happy coding!!!