Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
MichelleMoudy
Developer Advocate
Developer Advocate
Join our SAP Developer Challenge and dive into the world of React while harnessing the power of SAP's sleek looks, styles, and guidelines.


In this month-long challenge, you'll learn to create a fully functional table using a mix of SAP components and your very own custom components. We'll start with the basics and gradually ramp up the complexity, equipping you with essential skills in manipulating data and building reusable components that seamlessly blend with the SAP aesthetic.

Throughout the challenge, you'll learn the art of data flow between components and gain proficiency in crafting your own components. We'll also throw in some optional weekly challenges to help you push your newfound skills to the limit.

 

What is React?

React is a popular JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage their state. React uses a virtual DOM (Document Object Model) to efficiently update and render components, resulting in fast and responsive web applications. It follows a component-based architecture and promotes a declarative approach to building UIs, where developers describe how the UI should look for a given state rather than imperatively manipulating the DOM. React is widely used in web development and has a vibrant ecosystem of tools and libraries that enhance its capabilities.

 

What is SAP UI5 and what are the UI5 Web Components for React?

SAP UI5 is a framework for developing enterprise-grade web applications. It provides a comprehensive set of libraries and tools to create user interfaces that are consistent, responsive, and accessible across devices. UI5 is based on HTML5, CSS3, and JavaScript, and follows a model-view-controller (MVC) architecture. It integrates well with SAP systems and offers a wide range of pre-built UI controls and templates for faster development. UI5 supports data binding, internationalization, and modular development, making it suitable for building complex business applications. It also provides a robust development environment and follows SAP's Fiori design principles for a modern and intuitive user experience.

The UI5 Web Components for React is a component library built on top of the prebuilt UI controls and templates specifically designed for the use of React applications.

 

Challenge Schedule


Week 1 (June 7th): Create a Table
Week 2 (June 14th): Craft a Custom Component
Week 3 (June 21st): Implement Infinite Scroll
Week 4 (June 28th): Add New Rows

At the end of the challenge, if you have participated in all 4 weeks, you’ll get a new badge to commemorate your success.


 

How to Participate


Code Sandbox (For now; a GitHub repository will be available soon)
Create an account here.
• Log in to your account.
Fork this repository by following the provided link. *
• Customize the header in src/App.tsx and ensure you can save and observe changes.
• Let the coding commence in src/Solution.jsx!

* If you are not able to fork the repository, double check you are logged in by going to the menu on the left side of the screen. If it is asking you to log in, go to the code challenge home page and log in through there, then refresh the repo page.

Get ready to level up your React skills while immersing yourself in the SAP Web Components universe. Let the challenge begin!
3 Comments