Hey, how are you today.
In this blog series we will explore the capabilities of UI5 Web Components by creating some nice apps using React.
The idea here is to bring some industry best practices of concepts and combined strategies. We understand the urge of having efficient and high performance apps today. The scope of this series is not only limited on SAP technologies, but several other technologies that improves the quality and support of our final products.
We will design and develop a Worklist App ready to run on production.
Topics like SPA (single page application), SEO (search engine optimization), styled-components, Conventional Commits, Linter, GitHub Hooks, CI, and build/deploy will be discussed in the next post, so stay tune.
For such thing, we will be always using TypeScript on projects. In case you don't know what TypeScript is, you can read more about here.
Let's deep into the part 1 by creating our first app, and pushing into a GitHub repository.
To start a new Create React App project with typescript support, you can run at console
To add TypeScript to an existing Create React App project, first install it:
Let's now add the UI5 Web Components React Wrapper. By using the wrapper, we will have all he UI5 support inside of the react context.
For this example, we will add a
Working with
Now the project configuration is finally done let's do some coding.
Open the
When done, run
Notice that using only a few snippet of code, we're able to delivery nice Fiori experience. At the next posts we will increase this experience with more elements.
Let's now push our code into GitHub. At the next sections, we will learn how to configure GitHub Actions to build a Continuous Integration pipeline.
The code of this section can be found at GitHub Dist, implement it and test other features. Also, feel free to send any suggestion or comments.
That's it for today. Hope you've liked, and looking forward to see you at next blog post of this serie.
BTW, do not forget to leave a comment.
In this blog series we will explore the capabilities of UI5 Web Components by creating some nice apps using React.
The idea here is to bring some industry best practices of concepts and combined strategies. We understand the urge of having efficient and high performance apps today. The scope of this series is not only limited on SAP technologies, but several other technologies that improves the quality and support of our final products.
We will design and develop a Worklist App ready to run on production.
Topics like SPA (single page application), SEO (search engine optimization), styled-components, Conventional Commits, Linter, GitHub Hooks, CI, and build/deploy will be discussed in the next post, so stay tune.
For such thing, we will be always using TypeScript on projects. In case you don't know what TypeScript is, you can read more about here.
Let's deep into the part 1 by creating our first app, and pushing into a GitHub repository.
- Create React App with TypeScript Support
- Add TypeScript to an existing Create React App
- Add UI5 Web Components React Wrapper
- Working with
ShellBar - Push project to GitHub
- Gist
Before start
- Make sure you have Node.js installed
- Git on command line (recommended)
- Yarn Package Manager (recommended)
Create React App with TypeScript Support
To start a new Create React App project with typescript support, you can run at console
npx create-react-app my-app --template typescript
# or
yarn create react-app with-worklist-template --template typescriptAdd TypeScript to an existing Create React App
To add TypeScript to an existing Create React App project, first install it:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jestAdd UI5 Web Components Wrapper
Let's now add the UI5 Web Components React Wrapper. By using the wrapper, we will have all he UI5 support inside of the react context.
For this example, we will add a
ShellBar at the top of the page, so let's also add the webcomponents-fiori too in order to have all fiori experience enabled into our app. See more at Add @ui5/webcomponents-react to an existing app.yarn add @ui5/webcomponents-react @ui5/webcomponents-fiori --saveWorking with ShellBar
Now the project configuration is finally done let's do some coding.
Open the
App.tsx at src dir, and add the ShellBar, just like below...
import { Avatar, ShellBar } from '@ui5/webcomponents-react';
import logo from './logo.svg';
...
export default function App() {
return (
<div>
<ShellBar
primaryTitle="Worklist App"
notificationCount="99"
showNotifications={true}
showProductSwitch={true}
>
<Avatar slot="logo" image={logo} />
<Avatar slot="profile" image="https://github.com/afuscella.png" />
</ShellBar>
</div>
);When done, run
yarn start or npm start at the console. your browser window should open on localhost:3000 after a while. It should be similar to this, with the ShellBar at the top.
Notice that using only a few snippet of code, we're able to delivery nice Fiori experience. At the next posts we will increase this experience with more elements.
Push project to GitHub
Let's now push our code into GitHub. At the next sections, we will learn how to configure GitHub Actions to build a Continuous Integration pipeline.
- Push your code to GitHub. In case you don't how to, access https://github.com/ and create an account and follow steps. GitHub is quite intuitive.
- Add topic
scn-worklist-appin your GitHub repository, and get to know all worklist projects built at this series. GitHub topics: scn-worklist-app.
Gist
The code of this section can be found at GitHub Dist, implement it and test other features. Also, feel free to send any suggestion or comments.
Done
That's it for today. Hope you've liked, and looking forward to see you at next blog post of this serie.
BTW, do not forget to leave a comment.
Bluesky
