The Smart Store app is a React sample application, demonstrating the usage of the UI5 Web Components for React. You can find a step by step tutorial below on how to build the app by yourself. You don't have to clone the repo, the app will be built from scratch.
Note: no previous experience with UI5 Web Components for React is required. To take the most of the tutorial, a basic knowledge with React is desirable.
- Node.js - version 8.10 or later (check the version with
node -v
) - npm - version 6 or later (check the version with
npm -v
)
The Smart Store app enables a store manager to control his/her multiple stores. It provides the most important information and status of the stores and urgent tasks that should be addressed by the store manager.
-
Bootstrap the app with Create React App executing the following commands in your terminal.
npm init react-app smart-store-app cd smart-store-app
-
Install the UI5 Web Components for React library.
npm install @ui5/webcomponents-react
-
Consume the UI5 Web Components for React.
All the components can be imported from
"@ui5/webcomponents-react/lib/<component_name>";
Import one of the available components in thesrc/App.js
.import { Button } from "@ui5/webcomponents-react/lib/Button"; // imports the Button
Then, you can add the
Button
insrc/App.js
and that`s it!function App() { return ( <Button>Hello world!</Button> ); }
-
Launch the app and you should see the
Button
rendered on the screen.npm start