/ui5con-smart-store

UI5con Smart Store implementation with UI5 Web Components for React

Primary LanguageJavaScript

Smart Store app

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.

Prerequisites

  • Node.js - version 8.10 or later (check the version with node -v)
  • npm - version 6 or later (check the version with npm -v)

Short story

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.

Getting started

  1. 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
  2. Install the UI5 Web Components for React library.

    npm install @ui5/webcomponents-react
  3. 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 the src/App.js.

    import { Button } from "@ui5/webcomponents-react/lib/Button"; // imports the Button

    Then, you can add the Button in src/App.js and that`s it!

    function App() {
    	return (
    		<Button>Hello world!</Button>
    	);
    }
  4. Launch the app and you should see the Button rendered on the screen.

    npm start

Build the Smart Store app

Resources

Smart Store app

Sources of Smart Store App

List of all available UI5 Web Components for React