diff --git a/tutorials/ui5-webcomponents-react-routing/ui5-webcomponents-react-routing.md b/tutorials/ui5-webcomponents-react-routing/ui5-webcomponents-react-routing.md index 890cfc961..2b9bb3fb1 100644 --- a/tutorials/ui5-webcomponents-react-routing/ui5-webcomponents-react-routing.md +++ b/tutorials/ui5-webcomponents-react-routing/ui5-webcomponents-react-routing.md @@ -11,6 +11,9 @@ author_profile: https://github.com/Lukas742 # Add Routing to a UI5 Web Components for React Project Use routes to navigate between different pages using UI5 Web Components for React. +## Prerequisites +- Complete the tutorial [Create an Analytical Dashboard via UI5 Web Components for React](ui5-webcomponents-react-dashboard). + ## You will learn - How to refactor code into different React components - How to create multiple pages @@ -39,11 +42,11 @@ export function Detail() { ### Add Router -1. Install `react-router-dom`. +1. Install `react-router-dom`: [React Router](https://reactrouter.com) is a collection of navigational components that compose declaratively with your application. - Execute the following line in the terminal in your root location of the project. + Execute the following command in the terminal in your root location of the project. ```Shell npm install react-router-dom @@ -76,9 +79,9 @@ export function Detail() { } ``` -2. Refactor `MyApp.tsx`. +2. Refactor `MyApp.tsx`: - Some refactoring is necessary now. Extract every component and the corresponding logic except for the `ShellBar` from `MyApp.tsx` and move it to `Home.tsx`. + Some refactoring is necessary now to turn `MyApp.tsx` into a navigation container that displays other components based on the route. Extract every component and the corresponding logic except for the `ShellBar` from `MyApp.tsx` and move it to `Home.tsx`. `MyApp.tsx` should now look like this: @@ -399,7 +402,7 @@ Your current URL now displays the `#/home` path. If you replace `home` with `det ### Handle navigation -Except for changing the URL of the App users don't have options to navigate to the `Detail` page. The page could contain some more information about activities and should therefore be connected to the `Progress Card`. +Currently user don't have any options to navigate to the `Detail` page (except for changing the URL). The page could contain some more information about activities and should therefore be connected to the header of the `Progress Card`. 1. Go into your `Home` component and add `interactive` and `onClick={handleProgressHeaderClick}` to your second `CardHeader` component. @@ -418,7 +421,7 @@ Except for changing the URL of the App users don't have options to navigate to t > ``` -2. Define the `handleProgressHeaderClick` function as follows. And import the `useNavigate` hook from `react-router-dom`. +2. Define the `handleProgressHeaderClick` function as follows (inside the `Home()` function definition). And import the `useNavigate` hook from `react-router-dom`. ```TypeScript / TSX import { useNavigate } from "react-router-dom"; @@ -430,21 +433,14 @@ Except for changing the URL of the App users don't have options to navigate to t }; ``` - Now it is possible to navigate to the `Details` component, but right now, there is no way to go back except for the back button of the browser and typing in the URL manually. + Now it is possible to navigate to the `Details` component by pressing the `CardHeader`, but right now, there is no way to go back except for the back button of the browser and typing in the URL manually. -3. Navigate back to the Home Screen +3. Navigate back to the home screen: - Normally when you click on the Logo of the app, it should send you back to your `Home` screen. Let's implement that. + Usually when you click the logo of an app, it should send you back to the `Home` screen. Let's implement that. Go into your `MyApp.tsx` file where your `ShellBar` is located and add an `onLogoClick` prop. The function is almost the same as for the `onHeaderClick`, but this time the destination should be the default page. - ```TypeScript / TSX - const navigate = useNavigate(); - const handleLogoClick = () => { - navigate("./"); - }; - ``` - ```TypeScript / TSX } @@ -457,6 +453,15 @@ Except for changing the URL of the App users don't have options to navigate to t onLogoClick={handleLogoClick} > ``` + ```TypeScript / TSX + import { useNavigate } from "react-router-dom"; + ``` + ```TypeScript / TSX + const navigate = useNavigate(); + const handleLogoClick = () => { + navigate("./"); + }; + ``` ### Code overview 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 c8207508d..eded463cc 100644 --- a/tutorials/ui5-webcomponents-react-styling/ui5-webcomponents-react-styling.md +++ b/tutorials/ui5-webcomponents-react-styling/ui5-webcomponents-react-styling.md @@ -11,6 +11,9 @@ author_profile: https://github.com/Lukas742 # Add Custom Styles and Components for UI5 Web Components for React Add custom styles and custom components to your application using UI5 Web Components for React. +## Prerequisites +- Complete the tutorial [Add Routing to a UI5 Web Components for React Project](ui5-webcomponents-react-routing). + ## You will learn - How to change style of existing components - How to style own components @@ -54,7 +57,7 @@ If you want to add a custom component to your app, but still want to use the sty In this step we will use [CSS Modules](https://github.com/css-modules/css-modules) and inline styling to style a custom component. -> **Note:** The Vite template already includes support for CSS Modules, so you can use them out of the box. +> **Note:** The Vite template this project is using already includes support for CSS Modules, so you can use them out of the box. 1. Create a custom component `MyCustomElement.tsx` under `./src` with following content: @@ -70,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 import `@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. @@ -78,7 +81,10 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module npm install @ui5/webcomponents-react-base ``` -3. Add inline-styles to apply `ThemingParameters` to the `` + > **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. To pin the version manually, run the command `npm install @ui5/webcomponents-react-base@`. + +3. Add inline-styles to apply `ThemingParameters` to the ``: ```TypeScript / TSX @@ -88,9 +94,9 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module The global CSS variables contain all publicly available styling parameters. With this it is possible to style custom components with the standardized styles of the UI5 Web Components. -4. Add styling using CSS Modules +4. Add styling using CSS Modules: - First create a new file `MyCustomElement.module.css` in the same folder as `MyCustomElement.tsx` with the following content: + First, create a new file `MyCustomElement.module.css` in `src` with the following content: ```CSS .container { @@ -141,29 +147,29 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module ``` ![Custom Element](01_customElement.png) - Now you can see, that the element has the same `fontFamily` and uses the same semantic colors as UI5 Web Components for React. + As you can see the custom element has the same `fontFamily` and uses the same semantic colors as UI5 Web Components for React. ### SAP UI Common CSS -It's often required setting more complex styles for e.g. layouting. For this it's recommended using CSS classes of the [SAP UI Common CSS](https://sap.github.io/fundamental-styles/?path=/docs/common-css-introduction--docs) library which is also following the Fiori design guidelines. +It's often required to define more complex styles, for example for layouting. In this case, it's recommended to use the [SAP UI Common CSS](https://sap.github.io/fundamental-styles/?path=/docs/common-css-introduction--docs) library and its CSS classes, which also follow the SAP Fiori design guidelines. One example is applying a responsive content padding to the content of the dashboard: -1. Install Common CSS +1. Install Common CSS: ```shell npm i @sap-ui/common-css ``` -2. Import the required classes in `Home.tsx` +2. Import the required classes in `Home.tsx`: ```ts import '@sap-ui/common-css/dist/sap-content-paddings.css'; import '@sap-ui/common-css/dist/sap-container-type.css'; ``` -3. Apply the classes on elements +3. Apply the classes on elements: - Add `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: ```tsx
@@ -173,7 +179,7 @@ One example is applying a responsive content padding to the content of the dashb ... ``` - Remove `style` from the outer `FlexBox` and apply the `sap-content-paddings-container` class: + Also remove the `style` from the outer `FlexBox` and apply the `sap-content-paddings-container` class: ```tsx