CodePenを使うとブラウザで直接JavaScriptのコードを書いてアプリケーションを動かすことが出来ます。サーバーも不要ですし、ちょっとしたアプリケーションであればこれだけでも簡単に作成&公開が可能です。
CodePenのトップページにCREATEメニューがあります。そちらでPenをクリックして新規作成します。
するとPenの設定画面が開きます。ここのJSメニューで、JavaScriptのライブラリなどのCDNを追加することが出来ます。ここで検索も出来ますが、Reactをとりあえず動かすには公式に説明があるように、下記の2つのURLを登録する必要があります(現時点のバージョンですので適宜更新してください)。
あとはJSXを動作させるためにJavaScript PreprocessorをBabelにしておきます。
同様にCSSのフレームワークなども追加できます。設定できたら「Save & Close」で確定します。
あとは実際にHTMLとJavaScriptを書いていきます。ひとまずロジックもなにもない、単なる最小の表示を作ってちゃんと動作しているか確かめます。
const IncrementButton = () => {
const [count, setCount] = React.useState(0)
return (
<div>
{count}
</div>
)
}
ReactDOM.render(<IncrementButton />, document.querySelector('#app'))
<div id="app"></div>
これで下記のようにcountの値が表示されているので問題なさそうです。
次に値をかえるロジックを入れていきます。
const IncrementButton = () => {
const [count, setCount] = React.useState(0)
return (
<div>
<div>{count}</div>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
}
ReactDOM.render(<IncrementButton />, document.querySelector('#app'))
ボタンを押すと値が増えていくロジックを追加することが出来ました。
実際に試してみることも出来ます。
https://codepen.io/dala00/pen/eYNRvGP
あとはCrieitやQiitaなどは埋め込みも可能です。
See the Pen React.js simple application by dala00 (@dala00) on CodePen.
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント