Hello World v1
In this demo, we set data in, and then get data from, a Store
object. This is about as simple as it gets.
First, we pull in the TinyBase store
module:
<script src="/umd/store.js"></script>
We import the createStore
function, create the Store
object with it:
const {createStore} = TinyBaseStore;
const store = createStore();
NB: If we had bundled TinyBase with this app, we could have used a regular import instead of having to destructure the TinyBaseStore
global.
We set the string 'Hello World' as a value in the Store
object. It's in a Cell
called c1
, in a Row
called r1
, in a Table
called t1
:
store.setCell('t1', 'r1', 'c1', 'Hello World');
Finally, we get the value back out again and update the page with it:
document.body.innerHTML = store.getCell('t1', 'r1', 'c1');
Add a little styling, and we're done!
@font-face {
font-family: Lato;
src: url(https://tinybase.org/fonts/lato-light.woff2) format('woff2');
}
body {
align-items: center;
display: flex;
font-family: Lato, sans-serif;
height: 100vh;
justify-content: center;
margin: 0;
}
And we're done! You now know the basics of setting and getting TinyBase data.
Next, we will set up a listener for data in the Store
object and then change the Cell
to see the display update. Please continue to the Hello World v2 demo.