Get Started with UI5 Web Components for React

UI5 Web Components for React provides various templates for starting your project. In this tutorial, we’ll use the Vite template.

Navigate to a folder where you want to create your Web App and open a terminal there. Then use the following command:

npx degit UI5/webcomponents-react/templates/vite-ts#main my-app
cd my-app
npm i

These commands sets up a Vite project, creating a React Application with TypeScript and incorporating all essential dependencies for UI5 Web Components for React.

Why TypeScript?

TypeScript, a superset of JavaScript and brings a lot of advantages for developers:

• Easy Debugging: Helps catch errors early.
• Code Guidance: Provides hints for better coding.
• Tool Support: Offers autocompletion and navigation in editors.
• Readability: Enhances code clarity with static typing.
• Gradual Adoption: Can be added to existing JavaScript projects.

1. Open the current directory with an editor of your choice (e.g. Visual Studio Code).

2. Inside your project folder, navigate to src. There, create a new file and name it MyApp.tsx.

3. Now, add the following lines of code to MyApp.tsx.

   TypeScript Copy

   export function MyApp() {
     return <div>My root component</div>;
   }

Structure of a React component

This is a very simple component, but it already shows you the basic structure of all components. The file starts with the import statements in the first few lines. Then, the component will be defined as a function (React docs) in PascalCase notation. This function starts the definitions of the props and the logic, we’ll add them in a later tutorial, and ends by returning JSX or HTML components in a return statement.

With this you created your first React component. To actually render the component you will have to add it to your src/App.tsx.

1. In App.tsx remove everything except for the React.Fragment (<></>) and the App component itself.

   TypeScript Copy

   function App() {
     return (<></>);
   }
   
   export default App;

2. Import your created component.

   TypeScript Copy

   import { MyApp } from "./MyApp";

3. Add the component to the return value of App().

   TypeScript Copy

   function App() {
     return (
       <>
         <MyApp />
       </>
     );
   }

   Note that <MyApp /> is using a self-closing syntax and is equivalent to <MyApp></MyApp>. All tags in JSX must be closed explicitly, this applies to HTML tags (like img) and custom JSX tags. Here you can find out more about JSX in general.

4. Open main.tsx. This is your entry file, let’s take a look at the content in more detail.

   Your file should look like this:

   TypeScript Copy

   import '@ui5/webcomponents-react/dist/Assets.js';
   import { ThemeProvider } from '@ui5/webcomponents-react';
   import { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
   import App from './App.tsx';
   import './index.css';
   
   createRoot(document.getElementById('root') as HTMLElement).render(
     <StrictMode>
       <ThemeProvider>
         <App />
       </ThemeProvider>
     </StrictMode>
   );

   • Assets.js': This includes assets like translation files (CLDR), theming, etc. of the required packages.
   • ThemeProvider: Inter alia, this provider makes your app react to theme and language changes and injects the CSS of used components.
   • StrictMode: The React StrictMode component enables additional development behaviors and warnings for the component tree inside. It is not required, but using it helps find common pitfalls and bugs in development. You can find out more about it here.
   • createRoot: This function lets you create the React root to display React components inside a browser DOM node (React docs). You will usually add this DOM node inside the index.html file.
   • App: A React component.
   • index.css: Global CSS file.

Now you can start the app in development mode. Execute the following command from the root directory of the project.

npm run dev

Open http://localhost:5173 to view it in the browser.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

TIP: You can put a browser window next to the editor in your screen to see the changes live in action.