diff --git a/apps/exampleapp/README.md b/apps/exampleapp/README.md index 8f948dddd..585ddb6e6 100644 --- a/apps/exampleapp/README.md +++ b/apps/exampleapp/README.md @@ -2,6 +2,70 @@ The example app serves as a demonstration application where we thoroughly test and implement interactions between multiple components following our best practices. Additionally, it functions as a prime illustration of how Juno components can be effectively utilized. +# Usage + +## Standalone + +To integrate the Microfrontend as a standalone module, follow these steps: + +1. Include the following script tag in your HTML file: + +```js + +``` + +2. Place a div element with the id "root" where you want the Microfrontend to be rendered: + +```html +
+``` + +## Embedded + +1. To embed the React Microfrontend into your application, start by installing it: + +```bash +npm add @sapcc/juno-app-exampleapp" +``` + +2. Next, import and integrate it into your code: + +```js +import Exampleapp from "@sapcc/juno-app-exampleapp" + +const App = () => { + /*...*/ + return ( +
+ +
+ ) +} +``` + +Or using React's lazy loading to keep the bundle size small + +```js +import { lazy } from "react" + +const Exampleapp = lazy(() => import("@sapcc/juno-app-exampleapp")) + +const App = () => { + /*...*/ + return ( +
+ +
+ ) +} +``` + # Best practices - [React Zustand] implementation with React context @@ -14,3 +78,7 @@ The example app serves as a demonstration application where we thoroughly test a - [Enhance Rendering Experience] Use of hook `useEndlessScrollList`. - [Coworking Experience] Components splitted in contexts. - Use of fetchLocal to simulate a local db. + +``` + +```