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.
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.
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!