2020-03-01に投稿

CodePenでReactを使った最小のアプリケーションを作る

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などは埋め込みも可能です。

CodePenの埋め込み

See the Pen React.js simple application by dala00 (@dala00) on CodePen.

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, React等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント