Get Started with UI5 Web Components for React

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

npx create-react-app my-app --template @ui5/cra-template-webcomponents-react
cd my-app

This command leverages create-react-app to create a React Application with all necessary dependencies for UI5 Web Components for React.

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

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

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

   import React from "react";
   
   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 (or as a class). 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.js.

1. In App.js remove everything inside of the <ThemeProvider>. You can also delete the className property and the import of the logo and "./App.css" as they are not needed anymore for this tutorial.

2. Import your created component.

   import { MyApp } from "./MyApp";
   

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

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

Your App.js file should now look like this:

import React from "react";
import { MyApp } from "./MyApp";
import { ThemeProvider } from "@ui5/webcomponents-react/lib/ThemeProvider";

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

export default App;

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

npm start

Open http://localhost:3000 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.