unpkg.comはreact@latestだとバグでreact.jsを読み込めないので注意

unpkg.comのreact@latestバグ

ある日、Reactを勉強中の知り合いからReactのJavaScriptファイルが404で読み込まれないという相談があった。

学習に使用している書籍は「WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用」というもので、こちらのページからサンプルをダウンロードしたが動かないという。

私もダウンロードして実行してみたがReactのJavaScriptファイルが404になり、確かに読み込めない。

<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

調査したところ、unpkg.comはreact@latestだとバグでreact.jsを読み込めないようになっていた。

https://unpkg.com/react@latest/dist/react.js はreact@16.0.0/dist/react.jsをリクエストするが、Reactはバージョン16からファイル名が変わったため、これでは読み込むことができない。

React cdn読み込みサンプル1

unpkg.comで読み込む方法

unpkg.comで正常に読み込ませるようにするには下記のように書き換える必要がある。

babel-standalone@6.15.0/babel.min.jsは変えなくても使えるが、Consoleに警告が出るためbabel-core/5.8.38/browser.jsについでに変えてしまったほうが良いだろう。

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

バージョン16ではなく15を使用した場合は下記の通り。

React.DOM.h1のような記述方法はバージョン16から使用不可なので注意。

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

React cdn読み込みサンプル2

cdnjsから読み込むようにする

cdnjsで読み込む場合はこのようになる。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

React cdn読み込みサンプル3