Modernizing SAPUI5 with React and UI5 Web Components: Simple Note App

[chrisobar]

Hello, SAP Community!

I’m excited to share a latest small demo project, where I experimented with modernizing SAP UI5 using UI5 Web Components and React. My goal was to create a Notes Application with a modern interface while maintaining the familiar UI5 experience. In this post, I’ll walk through the process, share some code, and hopefully inspire you to explore UI5 Web Components in your projects!

📸Project Overview

This notes app demonstrates how to use the latest UI5 Web Components in a React environment, leveraging Vite for a fast, modern development experience.

Why UI5 Web Components?

UI5 Web Components bring the familiar SAP Fiori design to the world of standard web components, making it easy to use UI5 components in frameworks like React, Vue, Angular, and more. They provide:

• Reusability across different JavaScript frameworks.
• Standardized web components that are lightweight and fast.
• Seamless integration with existing SAP UI5 controls.

🔨Tech Stack

• UI5 Web Components: Provides the core UI elements like Shellbar, Cards, BusyIndicator, etc.
• React & TypeScript: For component-based architecture and type safety.
• Vite: Modern build tool for super-fast development and bundling.

📝Key Features

• Add, Edit, and Delete Notes with a clean and responsive UI.
• Sorting and Filtering functionality using custom search and filter logic(automated).
• Theming support, allowing dynamic theme changes.
• State Management with React hooks to handle the component states.

Try the link below for Demo:

https://ui5-webcomponent-react-demo.vercel.app/

Note: Data provided are just Javascript arrays