見出し画像

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

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

それじゃ、スタート!

用意するもの

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

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

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

2.中に3つのファイルを作る。コピペで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);

3.あとは以下のコマンドを順番に叩けばOK!

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

4.http://localhost:1234/ を見てみよう!

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

ねっ!簡単だったでしょ?

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

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

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

いいなと思ったら応援しよう!