Skip to content

Latest commit

 

History

History
110 lines (74 loc) · 2.31 KB

getting-started.md

File metadata and controls

110 lines (74 loc) · 2.31 KB

Getting Started

Hello World

Let's begin with the simplest of all programs. Paste the following code in a new html file and open it in your browser. Or try it online.

<body>
<script src="https://unpkg.com/hyperapp"></script>
<script>

const { h, app } = hyperapp

app({
  state: "Hi.",
  view: state => h("h1", null, state)
})

</script>
</body>

The state represents the application's data.

state: "Hi."

The view describes the user interface.

state => h("h1", null, state) // <h1>Hi.</h1>

To compose the user interface, the h(tag, data, children) utility function returns a tree of virtual nodes.

{
  tag: "h1",
  data: null,
  children: ["Hi"]
}

You can also describe views in JSX or Hyperx markup by setting up a build pipeline.

state => <h1>{state}</h1>

The app(props) function wraps everything together and renders the view on the DOM.

Installation

You can download the minified library from a CDN.

<script src="https://unpkg.com/hyperapp"></script>

Or use npm/Yarn.

npm i hyperapp

Usage

HyperApp is available on the global scope when using a <script> tag.

const { h, app } = hyperapp

Or you can use ES6/ES5 by setting up a build pipeline.

import { h, app } from "hyperapp"

Build Pipeline

A build pipeline can be as complex as you want it to be, but it typically consists of a package manager, a compiler and a bundler.

Using a build pipeline we can transform Hyperx/JSX markup into h(tag, data, children) function calls before runtime. This is much faster than sending a parser down the wire and compiling the view in the browser.

Hyperx/JSX in:

<main id="app">Hi.</main>

Vanilla out:

h("main", { id: "app" }, "Hi.")

See Hyperx or JSX for instructions on how to setup a build pipeline.