Hyperappはじめました

JavaScriptライブラリです。
軽量、早い、簡単がそろったお気に入りのライブラリです
HyperappのREADMEにあるサンプルを動かすまでをやりました！
Githubにもコミットしております
https://github.com/guppy0356/hello-hyperapp

yarn + parcel + hyperappなのでよろしければcloneして動かしてみてください

READMEにあるサンプルを動かすまで

パッケージ

JSXを使う為にBabelが必要なのでインストール

yarn add --dev parcel-bundler babel-preset-env babel-preset-react

本命、Hyperappをインストール

$ yarn add hyperapp

.babelrc

{
  "presets": ["env", "react"],
  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
}

index.html

<!DOCTYPE html>
<html>
  <head>
      <title>Hello, Hyperapp</title>
  </head>
  <body>
      <div id="app"></div>
      <script src="index.js"></script>
  </body>
</html>

index.js

import { h, app } from "hyperapp"

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </main>
)

const main = app(state, actions, view, document.body)

動かしてみる

yarn run parcel index.html

おわりに

JavaScriptあたりはかなり動きが激しいので、ついていけない著者ですがなんとか動くとこまでいけました。
難しいですが、視野が広がってチャレンジすることはいいですね

Hyperapp事始め