Interact with the State Object through Hyperapp Action functions
Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It comes with a VDOM engine and state management without any dependencies. In this lesson, we build a simple counter app. We include the Hyperapp library using the Unpkg link: https://unpkg.com/hyperapp and then attach it to our page on the window.main global.
To build a counter, we only need to add a bit of state and a couple actions to our application to get it to work.
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.
[00:52] If we save our file, and we refresh the page, we should see a non-functioning counter. Let's make it functional. Let's start by adding count to our state. State, in a Hyperapp, in just a plain JavaScript object of key and value pairs.
[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.
[01:50] Then what we want to return is a plain JavaScript object of our next state. In this case, we'll have count. That'll be state.count, minus our passed-in value. We'll also have increment action. It'll be very similar, except instead of subtracting, we will add our value.
[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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!