【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 を使って、
画面を変化させる方法について解説する予定!
ぜひ「フォロー」と「スキ!」をよろしくね!
あと、質問があればコメントください!
読んでくれてありがとう!