topic Re: SAP Developer Challenge - UI5 Web Components for React Challenge (Week 1) in Application Development and Automation Discussions

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

MichelleMoudy6 — Wed, 14 Jun 2023 14:05:51 GMT

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 on the "fork" button at the top right of the webpage.

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!

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

arunkrishnamoorthy1988 — Wed, 07 Jun 2023 23:12:41 GMT

Here is screenshot of my table.

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

nicoschoenteich — Thu, 08 Jun 2023 07:51:16 GMT

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:

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

SushmitaG98 — Thu, 08 Jun 2023 10:28:11 GMT

Here is my screenshot for week 1 Challenge

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

raja_velayuthan — Fri, 09 Jun 2023 01:13:43 GMT

Here is my screenshot for Week 1 Challenge

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

Tomas_Buryanek — Tue, 13 Jun 2023 07:22:35 GMT

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.

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

former_member146132 — Fri, 09 Jun 2023 12:09:55 GMT

Hi All,

Here is the output for the first week challenge:

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

joeremo — Fri, 09 Jun 2023 12:52:14 GMT

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.

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

Ruthiel — Fri, 09 Jun 2023 13:08:31 GMT

Amazing challenge!

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

SamyukthaPrabhu — Sat, 10 Jun 2023 00:11:21 GMT

Hi there!

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

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

gauthamkamathk — Sat, 10 Jun 2023 00:36:14 GMT

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.

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

S0025473719 — Sat, 10 Jun 2023 06:27:40 GMT

good post

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

nicoschoenteich — Sat, 10 Jun 2023 06:43:47 GMT

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

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

MarcelloUrbani — Sat, 10 Jun 2023 13:42:42 GMT

Here is the output for the first week challenge:

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

manuelbordallo — Mon, 12 Jun 2023 14:09:11 GMT

My first week challenge output:

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

JohnPaulLiberal — Mon, 12 Jun 2023 15:05:11 GMT

Hi All!

Here is the output for this week's challenge:

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

gphadnis2000 — Mon, 12 Jun 2023 15:09:17 GMT

Here is my screenshot of week 1 challenge.

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

bztoy — Tue, 13 Jun 2023 06:42:21 GMT

Hello,

Here is my screenshort for week#01.

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

ShadM — Tue, 13 Jun 2023 13:58:25 GMT

Week 1 challenge completed. Excited for the next one

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

agnissh — Tue, 13 Jun 2023 14:35:33 GMT

Week1#