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 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.
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.
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:
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.
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.
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!