The Smart Store app is a React sample application, demonstrating the usage of the UI5 Web Components. 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 is required. To take the most of the tutorial, a basic knowledge with React is desirable.
node -v
)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.
npm install @ui5/webcomponents
Consume the UI5 Web Components.
All the components can be imported from "@ui5/webcomponents/dist/<component_name>";
Import one of the available components in the src/App.js
.
import "@ui5/webcomponents/dist/Button"; // loads ui5-button
Then, you can add the ui5-button
in src/App.js
and that`s it!
function App() {
return (
<ui5-button>Hello world!</ui5-button>
);
}
Launch the app and you should see the ui5-button
rendered on the screen.
npm start