diff --git a/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md b/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md index 2a5fd9e4b..06cf76055 100644 --- a/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md +++ b/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md @@ -13,7 +13,7 @@ author_profile: https://github.com/Lukas742 ## Prerequisites -- Complete the tutorial [Get Started with UI5 Web Components for React](ui5-webcomponents-react-introduction). +- Complete the tutorial [Get Started with UI5 Web Components for React](tutorials/ui5-webcomponents-react-introduction). ## You will learn - How to import UI5 Web Components into your application diff --git a/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md b/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md index 63b0b2ad4..fafc29f3a 100644 --- a/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md +++ b/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md @@ -32,7 +32,13 @@ UI5 Web Components for React also comes with a chart library. In this tutorial, ``` > **Note:** - When facing issues with installing, please ensure you're using the same [minor version](https://semver.org/#summary) as the other `@ui5/webcomponents*` packages. You might have to also manually pin `@ui5/webcomponents-react-base` to that minor version. In that case, the install command would be `npm install @ui5/webcomponents-react-charts@ @ui5/webcomponents-react-base@`. + > When facing issues with installing, please ensure you're using the same [minor version](https://semver.org/#summary) as the other `@ui5/webcomponents*` packages. You might have to also manually pin `@ui5/webcomponents-react-base` to that minor version. In that case, the install command would be `npm install @ui5/webcomponents-react-charts@ @ui5/webcomponents-react-base@`. + > + > For example: + > + > ```shell + > npm install @ui5/webcomponents-react-charts@2.27 @ui5/webcomponents-react-base@2.27 + > ``` 2. Then, import `LineChart` and `BarChart` into `MyApp.tsx`. @@ -45,7 +51,7 @@ UI5 Web Components for React also comes with a chart library. In this tutorial, _Charts only offer limited accessibility support with only basic built-in features, so it’s essential to ensure your implementation meets the accessibility standards of your application!_ -1. Start with the `LineChart`. You can add it underneath the `Text` component. Then pass the `dimensions` and `measures` prop with an empty array as value. +1. Start with the `LineChart`. You can add it underneath the `Text` component. Then pass the `dimensions` and `measures` props with empty arrays as values. ```TypeScript / TSX @@ -56,7 +62,7 @@ _Charts only offer limited accessibility support with only basic built-in featur In the application you should now see a placeholder for the `LineChart` within the `Card` content. The reason for this is that the chart has not received any data and therefore the placeholder is displayed. -2. Add data to your component. For this sample `dataset` is static you can define it outside the component, right above your `MyApp` component. +2. Add data to your component. For this sample `dataset` is static, and you can define it outside the component, right above your `MyApp` component. ```TypeScript / TSX const dataset = [ @@ -101,11 +107,11 @@ _Charts only offer limited accessibility support with only basic built-in featur /> ``` - Congratulation, you implemented your first Chart component. + Congratulations, you implemented your first Chart component. ![LineChart](01_linechart.png) -4. We now want to show same data just with a different representation. For that, you can use the same props as you did with the `LineChart` for a `BarChart` and add it to the `Card`. +4. We now want to show the same data, just with a different representation. For that, you can use the same props as you did with the `LineChart` for a `BarChart` and add it to the `Card`. ```TypeScript / TSX ``` - Two charts are rendered now with equal datasets but different representation. + Two charts are rendered now with equal datasets but different representations. Your `MyApp.tsx` component should look like this: @@ -194,14 +200,14 @@ export function MyApp() { Two charts in one `Card` is a bit too much, don't you think? It would be nicer if the charts could be toggled by clicking on the header. Let's implement that! -1. First add a state. It should control, which chart is going to be rendered. Use the [State Hook logic](https://react.dev/reference/react/useState) to implement the state and set `"lineChart"` as default value. Don't forget to import `useState` from React, otherwise you will get an error. +1. First add a state. It should control which chart is going to be rendered. Use the [State Hook logic](https://react.dev/reference/react/useState) to implement the state and set `"lineChart"` as default value. Don't forget to import `useState` from React, otherwise you will get an error. - Import the `useState` function in the header of the `MyApp.tsx` file. ```TypeScript / TSX - import { useState } from "react"; + import { useState } from "react"; ``` - Use the `useState` function right after you start to define the `MyApp` function (before the click handler). ```TypeScript / TSX - const [toggleCharts, setToggleCharts] = useState("lineChart"); + const [toggleCharts, setToggleCharts] = useState("lineChart"); ``` 2. By clicking on the `CardHeader` the state should be set corresponding to the chart which should be displayed. @@ -256,7 +262,7 @@ Two charts in one `Card` is a bit too much, don't you think? It would be nicer i import { Card, CardHeader, Text, Icon } from "@ui5/webcomponents-react"; ``` - The icons themselved can be imported altogether (`import '@ui5/webcomponents-icons/dist/AllIcons.js';`), but to reduce bundle size and for better maintainability, it's recommended importing each icon on its own: + The icons themselves can be imported altogether (`import '@ui5/webcomponents-icons/dist/AllIcons.js';`), but to reduce bundle size and for better maintainability, it's recommended importing each icon on its own: ```TypeScript / TSX import lineChartIcon from '@ui5/webcomponents-icons/dist/line-chart.js'; @@ -395,7 +401,7 @@ One of React's main advantages is its efficient rendering mechanism: a component 1. In order to demonstrate this behavior, add a new `state` (right after the definition of the chart state from the previous step). ```TypeScript / TSX - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(false); ``` 2. Then edit your `handleHeaderClick` function like this: @@ -438,9 +444,9 @@ One of React's main advantages is its efficient rendering mechanism: a component /> ``` -This updates the component every time you switch between charts and simulates a data call. +This updates the component every time you switch between charts and simulates a data call with the 2000ms timeouts. -As you can see, only the component affected by the state is updated, and the rest stays the same: The `CardHeader` remains unchanged until the 2000ms timeout is over (and `setToggleCharts` is called), whereas the charts `loading` prop changes immediately (as `setLoading` is called immediately). If you're working with data, you most probably will need a loading indicator. All UI5 Web Components that are able to display data have a `loading` prop and therefore also a loading indicator. +As you can see, only the component affected by the state is updated, and the rest stays the same: The `CardHeader` remains unchanged until the timeout is over (and `setToggleCharts` is called), whereas the charts `loading` prop changes immediately (as `setLoading` is called immediately). If you're working with data, you most probably will need a loading indicator. All UI5 Web Components that are able to display data have a `loading` prop and therefore also a loading indicator. ### Add dynamic header and text @@ -503,7 +509,7 @@ To make your `Card` look cleaner and to give the user the information that the h 3. Add accessibility attributes to the `Icon` If the `header` alone does not sufficiently describe the currently visible `Icon`, you can define an `accessibleName`. Its value will be applied as the `aria-label` of the internal element, which screen readers will pick up. - In case the `header` already explains the content and the icon is purely decorative, you can set its `mode` to `"Decorative"`, so it will be ignored by screen readers. + > In case the `header` already explains the content and the icon is purely decorative, you can set its `mode` to `"Decorative"`, so it will be ignored by screen readers. ```TypeScript / TSX ``` - That is strange -- the `ShellBarItem` does not show an icon. + But - something's not right. Nothing is rendering now. Every `Icon` that is used in a component has to be imported manually. All available icons can be found [here](https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons). @@ -137,7 +137,7 @@ The `ShellBar` is the central navigation element in your web application and sho import activateIcon from "@ui5/webcomponents-icons/dist/activate.js"; ``` - Now your `ShellBarItem` shows up on the right side of the `ShellBar`. + Now everything is back and your `ShellBarItem` shows up on the right side of the `ShellBar`. ![ShellBar](02_shellbar.png) @@ -453,7 +453,7 @@ For this, add two `Text` components above the `ProgressIndicator` of the first ` import tableViewIcon from "@ui5/webcomponents-icons/dist/table-view.js"; ``` - > At this point, the `AnalyticalTable` throws an error due to the missing required `data` prop. You will fix this in the next. + > At this point, the `AnalyticalTable` throws an error due to the missing required `data` prop, and rendering is not complete. You will fix this next. 2. Add data and columns to the table. The `columns` prop expects an array of objects that include at least the `accessor` to the data or a unique `id` property. The value of `Header` will be shown as column header. @@ -504,7 +504,7 @@ For this, add two `Text` components above the `ProgressIndicator` of the first ` You can add many more properties to the `AnalyticalTable` component. For example, you can allow sorting, filtering and grouping via `sortable`, `filterable` and `groupable`, enable different selection modes with `selectionMode`, control how the table splits up available space between the columns with `scaleWidthMode` and much more. Feel free to take a look at the [documentation](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-analyticaltable--docs) and explore the different examples before continuing. - The default visible rows count is at 15. This number is a bit to high for a dashboard table. Reduce the `visibleRows` count to 5 by setting the corresponding prop. + The default visible rows count (before scrolling starts) is at 15. This number is a bit too high for a dashboard table. Reduce the `visibleRows` count to 5 by setting the corresponding prop. ```TypeScript / TSX ... ``` @@ -577,6 +577,8 @@ Your component should now look like this: ![Dashboard](05_dashboard.png) +The source should look like this: + ```TypeScript / TSX import tableViewIcon from "@ui5/webcomponents-icons/dist/table-view.js"; import listIcon from "@ui5/webcomponents-icons/dist/list.js"; @@ -839,8 +841,3 @@ export function MyApp() { ); } ``` - - - - ---- diff --git a/tutorials/ui5-webcomponents-react-styling/ui5-webcomponents-react-styling.md b/tutorials/ui5-webcomponents-react-styling/ui5-webcomponents-react-styling.md index eded463cc..857e21a0f 100644 --- a/tutorials/ui5-webcomponents-react-styling/ui5-webcomponents-react-styling.md +++ b/tutorials/ui5-webcomponents-react-styling/ui5-webcomponents-react-styling.md @@ -73,7 +73,7 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module }; ``` -2. Explicitly import `@ui5/webcomponents-react-base` package: +2. Explicitly install `@ui5/webcomponents-react-base` package: `@ui5/webcomponents-react-base` is already installed by `@ui5/webcomponents-react`, but as we want to import the `ThemingParameters` in the following step, it's recommended adding the package to the dependencies as well. @@ -99,35 +99,35 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module First, create a new file `MyCustomElement.module.css` in `src` with the following content: ```CSS - .container { - background-color: var(--sapBackgroundColor); - font-family: var(--sapFontFamily); - height: 50px; - display: flex; - justify-content: center; - align-items: center; - } + .container { + background-color: var(--sapBackgroundColor); + font-family: var(--sapFontFamily); + height: 50px; + display: flex; + justify-content: center; + align-items: center; + } ``` Then import the CSS file in your `MyCustomElement.tsx` file and add the class to the `div` element. ```TypeScript / TSX - import { ThemingParameters } from '@ui5/webcomponents-react-base'; - import classes from './MyCustomElement.module.css'; - - export const MyCustomElement = () => { - return ( -
- - My custom Text Element - -
- ); - }; + import { ThemingParameters } from '@ui5/webcomponents-react-base'; + import classes from './MyCustomElement.module.css'; + + export const MyCustomElement = () => { + return ( +
+ + My custom Text Element + +
+ ); + }; ``` 5. Import the custom component and add it to your `Home` component. @@ -169,7 +169,7 @@ One example is applying a responsive content padding to the content of the dashb ``` 3. Apply the classes on elements: - Add a `div` that is wrapping the outer `FlexBox` and apply the `sap-container-type-inline-size` class: + Add a `div` that is wrapping the outer `FlexBox` and apply the `sap-container-type-inline-size` class (remembering to close it too): ```tsx
@@ -192,11 +192,7 @@ One example is applying a responsive content padding to the content of the dashb ### Conclusion -In this tutorial mission, you learned the basics of how to build a single page application using UI5 Web Components for React, with routing, styling, and general component behavior and modern React APIs. +In this series of tutorials, you learned the basics of how to build a single page application using UI5 Web Components for React, with routing, styling, and general component behavior and modern React APIs. If you have questions about UI5 Web Components for React, or found something that isn't right, then please feel free to join the [OpenUI5 Slack community](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/) and visit us in the [`#webcomponents-react`](https://openui5.slack.com/archives/CSQEJ2J04) channel, or come directly to our [GitHub page](https://github.com/UI5/webcomponents-react), where you can file [issues](https://github.com/UI5/webcomponents-react/issues/new/choose) or participate in [discussions](https://github.com/UI5/webcomponents-react/discussions). -If you enjoyed this tutorial, you can help us out a lot by starring our repo and become one of our wonderful [✨stargazers✨](https://github.com/UI5/webcomponents-react/stargazers)! - - - ---- +If you enjoyed this series, you can help us out a lot by starring our repo and become one of our wonderful [✨stargazers✨](https://github.com/UI5/webcomponents-react/stargazers)!