Render Text from State with Hyperapp

Kyle Shevlin
InstructorKyle Shevlin
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

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.

egghead
egghead
~ 8 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today