HTMLファイルだけでReactを実行

JavaScript React

Reactだけではないのですが、最近のJSフレームワーク系を始めようとすると、そのフレームワークだけでなくES2016/ES2017・Webpack・babel・npmなどと覚えることが多くて、大変そうってのはよく聞いたり。 確かに公式のドキュメントやいろんなブログやQiita見ても同じように書いてるので、それが標準なんですけどもう少し簡単に始めたいと思ってる人っているのかな？ 一昔前のjQueryなどのようにCDNからソースを読み込んで、自分用のコードを書いたらブラウザで確認できる的な！ 一応、Reactでもそれは出来るのです。

ReactをHTMLファイルだけで実行するコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React Sample</title>
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    )
  </script>
</body>
</html>

これでReactがHTMLファイルとブラウザだけで動作してます。

簡単な説明

各種ライブラリの読み込み

<script src="https://unpkg.com/react@15/dist/react.min.js"></script> 
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

上2つのライブラリがReactのコアのコードとDOM周りを管理するためのライブラリ 一番下はJSXをJavaScriptに変換するためのブラウザ上でbabelを動作させるためのライブラリ。

アプリの本体

  <div id="root"></div>

  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    )
  </script>

scriptタグの部分の h1タグ の部分がJSXで、id=root の箇所に h1タグ を挿入するといったイメージで動作します。

結論

一応動作はしますが、本来のプロダクトではこのような方法は行わないはずです。 プロダクトだと、最初に上げたようなツールとかを利用して開発が進められると思います。

ただ、個人でちょっとReact勉強してみようと思うけどやることが多いな、まずはReactの学習だけに専念したいって方にはこういう実行方法でも良いのではないかと思いました。 上にコード全部載ってるのですが、今回のサンプルコード

github.com