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 "Hello World" 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.

https://app.egghead.io/api/v1/lessons/javascript-render-text-from-state-with-hyperapp/subtitles

Render Text from State with Hyperapp

Instructor: [00:01] Every hyperapp requires two methods. An H-method to build virtual DOM nodes, and an app method to render our app. Let's start by looking at the app method.

[00:14] The app method takes four arguments, our current state, and actions object to update our state, a view function to view render to the DOM, and an entry DOM node. In this case, we'll make a document.body.

[00:32] Let's look at these four arguments and build up our Hello World app. State is just a plain JavaScript object that contains our initial app state. In this case, we'll make a title property that says, "Hello World."

[00:50] Actions are also a plain JavaScript object. They generally contain updaters for updating your state. However, in the Hello World, we will not have any action, so we'll just set this to NO. Lastly, we'll create a view function. View normally takes state and actions, but because we have no actions, we'll only take state. We'll use this to create a virtual DOM.

[01:16] Using our H-method, the first argument is the DOM tag that we want to use. The second one would be properties on that DOM tag. Lastly, what we want rendered inside of that tag or any children. In this case, let's state.title be rendered inside.

[01:36] If we save this, and we refresh the page, we should see, Hello world.

Render Text from State with Hyperapp

Share this video with your friends