TinyBase logoTinyBase

Hello World v4

In this demo, we use React to render data in the Store object and then change a Cell to see the display update. We're making changes to the Hello World v3 demo.

In addition to the store module, we pull in React, ReactDOM, and the ui module:

+<script src="/umd/react.production.min.js"></script>
+<script src="/umd/react-dom.production.min.js"></script>
 <script src="/umd/store.js"></script>
+<script src="/umd/ui-react.js"></script>
+<script src="/umd/ui-react-dom-debug.js"></script>

Since we're now using React, we can add the debug version of the ui-react-dom module so that we can use the StoreInspector component for the purposes of seeing how the data is structured.

We import the extra functions and components we need:

 const {createStore} = TinyBaseStore;
+const {CellView, Provider} = TinyBaseUiReact;
+const {StoreInspector} = TinyBaseUiReactDomDebug;

Instead of writing to the document, we create a React app comprising a single CellView component. This also takes care of setting up a CellListener for us and rendering the result:

-const update = () => {
-  document.body.innerHTML = store.getCell('t1', 'r1', 'c1');
-};
-update();

-store.addCellListener('t1', 'r1', 'c1', update);
+ReactDOM.createRoot(document.body).render(
+  <Provider store={store}>
+    <CellView tableId="t1" rowId="r1" cellId="c1" />
+    <StoreInspector />
+  </Provider>,
+);

We also added the StoreInspector component at the end there so you can inspect what is going on with the data during this demo. Simply click the TinyBase logo in the corner.

Next, we will use a Metrics object to keep a count (and a rolling average) of the values in each Cell in a Store. Please continue to the Averaging Dice Rolls demo.