SAP Developer Challenge - UI5 Web Components for React Challenge (Week 1)

[MichelleMoudy]

This post is part of the UI5 Web Components for React Challenge (June 2023)

Welcome to the first week of our developer challenge! Your objective is to utilize the Table component from UI5 Web Components for React to showcase the data stored in the `tableData` variable on the webpage.

To accomplish this, you'll need a beginner's understanding of React and JavaScript. If you're unfamiliar with these topics, we've compiled some helpful resources for you to brush up on the fundamentals.

Resources

UI5 Web Components for React

JavaScript Basics

JavaScript Arrays

General Overview of React

React Documentation

React Components

Rendering Lists

Getting Started

To get started, please sign up for an account on CodeSandbox, which you can access here. Make sure you are signed in; otherwise, you won't be able to fork the repository and work on your solution. You can verify your login status by checking the menu located at the top left of the page. It should resemble the screenshot provided.

Once you're signed in, fork the repository I've created by visiting the following link and clicking ...

The Challenge

Goal: Create a table using `tableData` in src/Solution.jsx

You have three tasks you need to accomplish to get credit for completion.

1)  Change the name of the title in App.tsx to include your name. This title will change every week.

2)  In Solution.jsx, below the label, create a table using the Table component from here.  This table should create all table rows dynamically and load all rows at once. The column headers should match the object parameter labels. You are going to need to add titles to each of the rows in the data. I used tasks I was completing for this week as inspiration.

3) Take a screenshot of your full table and header like the screenshot at the top of this blog post and post it to THIS discussion.

You will be writing your code in the Solution.jsx file. As you write and save your code, you should observe the corresponding changes in the development space located on the right side of the screen. If it isn’t automatically updating, you can click the refresh button on the right that appears when you hover over the panel.

Note: If you encounter issues with your frontend not loading, ensure that you have imported all the necessary dependencies. Unfortunately, the debugging experience may not provide clear error messages. One useful approach is to comment out sections of code until the UI loads, then gradually uncomment to isolate the problematic line.

Get ready to showcase your React skills by incorporating the power of UI5 Web Components! Good luck!

[arunmbarec]

Here is screenshot of my table. 

[nicoschoenteich]

Hi there!

Nice challenge and very easy to get started thanks to the CodeSandbox.

I am still not sure I am a big fan of JSX though. Mixing markup and logic seems dangerous and complex - I am not sure I understand the real benefits. Maybe someone can enlighten me 😅

Anyway, here is my screen shot:

 

[joeremo]

Hi,

I don't know enough to enlighten you, but you piqued my interest. My new perspective based on a brief research is that it sounds or looks like JSX is optional and is like "another tool to add to one's toolbox if they desire." It sounds like a better version of or replacement for HTML, but not a replacement for the MVC of SAPUI5. I have been studying SAPUI5 and OpenUI5 and so far considered Web Components as totally separate, like a transition for web developers that may be interested in moving to UI5. I guess like anything else, JSX has its plus and minuses. Thank you for piquing my interest on JSX.

[nicoschoenteich]

Hi @joeremo,

Thanks for your reply. What you say makes total sense. It probably sits somewhere between raw HTML and the MVC approach. I guess it is a question of using the right approach for the right application.

I also do like to use the UI5 Web Components without React, like with no framework at also, simply using vite. This is the simplest approach, very close to raw HTML and therefore very performant.

Best, Nico

[HappyGirl]

Here is my screenshot for week 1 Challenge 

[HappyGirl]

My updated screenshot..used UI5 component 

[raja_velayuthan]

Here is my screenshot for Week 1 Challenge

[Tomas_Buryanek]

Hello, am I the only one who has issues to open codesandbox.io website? It is returning ERR_TUNNEL_CONNECTION_FAILED in 99% of the times I try it.
EDIT: seems to be proxy issue on my side.

[Sonal]

Hi All,

Here is the output for the first week challenge:

[Ruthiel]

Amazing challenge!

[SamyukthaPrabhu]

Hi there!

Here's my entry for the SAP Developer Challenge - SAP UI5 Web Components for React Challenge (Week 1) 🙂

[gauthamkamathk]

Hello,

Please find my entry for the SAP Developer Challenge – SAP UI5 Web Components for React - Week 1. It was exciting to work on the challenge.

[S0025473719]

good post

[MarcelloUrbani]

Here is the output for the first week challenge:

[manuelbordallo]

My first week challenge output:

[JohnPaulLiberal]

Hi All!

Here is the output for this week's challenge:

[gphadnis2000]

Here is my screenshot of week 1 challenge.

[MichelleMoudy]

It doesn't appear that you've used the SAP UI5 Web Components for React Table component. You will need to use that in order to get credit for completing this challenge. You can find the info for the Table component linked below, along with examples of how to use it. Good luck!

https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-table--docs 

[gphadnis2000]

Hi Michelle,

Corrected now.

Thanks and Regards,

Gaurav Phadnis

[bztoy]

Hello,

Here is my screenshort for week#01.

[ShadM]

Week 1 challenge completed. Excited for the next one

[agnissh]

Week1# 

[Vrum]

I have just found this new challenge.
I did the other challenge for ABAPers and It was very informative.
Abap is my primary focus language.
I hope to be able to follow you 😅

This is my first time with Web Component in React 😀

nice to have found it 😉

Francesco


Francesco

[ManojKumarVarma]

Hi MichelleMoudy

Here is my week 1 challenge. The challenge is awesome. I am excited to do it.

Thanks.

[SingireddySunil]

Hi @MichelleMoudy 

Here is my screenshot for week 1 challenge. 

[PremKasina]

Hi @MichelleMoudy 

Here is my screenshot for week 1 challenge. 

[Prathyusha]

Hi @MichelleMoudy 

Here is my screenshot for week 1 challenge. 

[ojeswinisanaka]

Hi @MichelleMoudy ,

Here is  my week 1 challenge screenshot

[samirhabibsaad]

Hi @MichelleMoudy ,

Please find below, my screenshot for the week1 challenge.

[geovanny93]

Here is screenshot of my table.

[orozco_albert]

First time approaching UI5 web components, looking forward to some more challenges! 😄

[Sanurag18]

Here is the screen shot of my table.

[johna69]

Late to the game one this one:

[stickman_0x00]

🙂

[Nicolas]

Hello,

Thank you for the challenge. Here is the screenshot of my table:

Regards, Nicolas

[alessandraarm]

Hello!

Here is my screenshot for week 1 challenge 😊

[ecejudo]

[GRABLERE]

Thanks @MichelleMoudy for the challenge, was looking for a kickstart into react for some time:)

Thanks,

Emanuel

[Aliaksandr_Ch]

Hi @MichelleMoudy,

Thank you for the challenge!🤘