見出し画像

【Node.js】Hyperappを秒速でHelloWorldする方法！

はのちゃん

本当に簡単だよ！Node.jsの準備はいいかな？

それじゃ、スタート！

用意するもの

・Node.js
・お好きなコーディングエディタ（VSCodeでもATOMでも）
・JSXに怖気づかない気持ち

１．新しいディレクトリを作って、ターミナルを開く

mkdir my-hyperapp-project
cd my-hyperapp-project

２．中に３つのファイルを作る。コピペでOK！

.babelrc

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

index.html

<body>
  <script src="index.jsx"></script>
</body>

index.jsx

import {h, app} from 'hyperapp';
const state = {}, actions = {};
const view = () => <h1>Hello, HANO-Chan!</h1>;
app(state, actions, view, document.body);

３．あとは以下のコマンドを順番に叩けばOK！

npm init -y
npm i -S hyperapp
npm i -D parcel-bundler
npx parcel index.html

４．http://localhost:1234/ を見てみよう！

うまくいけば、 http://localhost:1234/ に index.jsx の内容が表示されるよ！

ねっ！簡単だったでしょ？

次回は、 state と actions を使って、
画面を変化させる方法について解説する予定！
ぜひ「フォロー」と「スキ！」をよろしくね！

あと、質問があればコメントください！

読んでくれてありがとう！

この記事が気に入ったらサポートをしてみませんか？