Instructor: 00:00 Let's make a counter app with Hyperapp. Let's start by making a static view. The view function takes the state and actions, and returns our virtual DOM. In order to build our virtual DOM, we need to use our H method.
00:14 Let's start by making a wrapping div. It'll have no properties, but it will have children, so we'll return an array. The children are also H functions. In this case, we'll have an H1 with no properties. It'll eventually show our state count, but right now, we'll just display a string of zero.
00:34 It'll also have two buttons, one for decrementing, and one for incrementing our state. Let's start with a button that has no properties, and we'll give it the minus symbol. Then we'll make another button that will have the plus symbol.
01:07 In this case, we'll add a key of count, and the value of zero. In our view, we will update this string here to be our state.count. If we save, and we refresh the page, nothing changes. It's still not interactive. Just to prove that our count works, let's change it, save it, and refresh. You can see our initial value changed.
01:30 Let's set it back to zero. Let's make these buttons interactive now. We do this by creating methods on the actions object. Let's make a decrement method and an increment method. Decrement can take a value, and then it'll be passed the state.
02:14 We've created our actions, but if we refresh the page, nothing happens yet, because we haven't bound them in our buttons. We'll come to our buttons, and on the onClick handlers, we will add functions to fire our actions.
02:31 This is where we'll pass our initial value. We'll decrement by one right now, and we'll increment by one on this other button. If we save this, we should have a working counter.