A simple date-time display

In this lesson we'll implement a simple date-time display.

End of lesson sandbox: https://codesandbox.io/s/2o1mmnwxvp

Transcript:

Hello, in this lesson we'll create a very simple date time display using Calmm.

What I have here is just a minimal React application in CodeSandbox.

I'll now change the application to import the React module from the Karet library.

The Karet library provides an augmented `createElement` function that allows us to embed Kefir observables into VDOM. We call this feature reactive VDOM.

Let's just create a Kefir observable that gives notifications at 1 second intervals.

And also starts immediately.

And then we'll map those notifications into strings of the current date and time.

We now have a simple date-time display!

Being able to embed observables directly into reactive VDOM has several benefits. In particular,

- We no longer need to write class components. We can now write entire applications using only functional components, because we can use observables for state and side-effects.

- Our components remain declarative, because the reactive VDOM implementation takes care of subscribing to observables when components are mounted and unsubscribing from observables when components are unmounted.

- Updates to VDOM with embedded observables are efficient. Our component functions, like the `App` component in this example, are only called on mount and changed VDOM elements are rerendered without calling our component functions.

This concludes the lesson. Thank you for listening!