Node.jsを使わずにReact環境を構築する方法

React単独で動く環境を構築したい場合、以下の手順で構築することができます。
(本番運用するときはパフォーマンス面からNode.jsを使うのが通常です。)

ディレクトリ構成

sample
 |-index.html
 |-app.js

ファイル

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Reactサンプル</title>
</head>
<body>
  <h1>Reactサンプル</h1>

  <div id="container"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="app.js" type="text/babel"></script>
</body>
</html>

app.js

ReactDOM.render(
  <p>Hello world</p>, document.getElementById('container')
);

この状態でindex.htmlを開いてもHello Worldが表示されないはずです。
なぜならapp.jsにJSXの記述があるためです。

babel-standaloneを追加

ブラウザはJSXを理解できないのでブラウザが理解できるように変換してあげる必要があります。
変換には以下のとおり、babel-standaloneを使用します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Reactサンプル</title>
</head>
<body>
  <h1>Reactサンプル</h1>

  <div id="container"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- babel-standalone読み込み -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- text/babelを追加 -->
  <script src="app.js" type="text/babel"></script>
</body>
</html>

これで正常に表示されるようになったはずです。

参考

公式ドキュメント
https://ja.reactjs.org/docs/add-react-to-a-website.html
GitHub
https://github.com/sign0324/react-no-nodejs

コメントを残す

メールアドレスが公開されることはありません。