Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Render Text from State with Hyperapp

    Kyle ShevlinKyle Shevlin

    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.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss