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>

We import the extra functions and components we need:

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

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

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.