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/tinybase/store/index.js"></script>
+<script src="/umd/tinybase/ui-react/index.js"></script>
+<script src="/umd/tinybase/ui-react-inspector/index.js"></script>

Since we're now using React, we can use the Inspector 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 {Inspector} = TinyBaseUiReactInspector;

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" />
+    <Inspector />
+  </Provider>,
+);

We also added the Inspector 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.