前回からの続きですが、このページだけ読んでも分かる内容になっています。
公式サイトのサンプルが動かない？
React公式ドキュメントページにたどり着く
ReactをCDNで読み込んで、とにかくHello Worldと表示したいと思った人は、検索などで以下のReact公式のドキュメントページにたどり着く可能性が高いでしょう。
上記の２つのページを読んだ結果、完成するHTMLソースは以下のようなものかもしれません。
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>上記のサンプルソースをHTMLファイルにしたものが以下です。
https://programming-world.net/sample/react_hello_world2-1.html
しかし、上記リンクをクリックしても、画面には何も表示されません。ブラウザの種類をChromeなどに変えても、（将来的には分かりませんが）少なくとも現在は表示されません。
React公式サイトのドキュメントで「 React のいちばん短い例はこのようになります 」と紹介されているコードなのに、なぜ 「Hello, world!」 と表示されないのでしょうか。
React公式サイトのサンプルを動かすには？
React公式サイトで「 React のいちばん短い例はこのようになります」として紹介されているのは、以下のコードです。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);上記コードを動かすには、以下のように記述します。
<!DOCTYPE html>
<html>
<head>
<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="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>上記のサンプルソースをHTMLファイルにしたものが以下です。
https://programming-world.net/sample/react_hello_world2-2.html
上記リンクをクリックすると、今度は画面に「Hello, world!」と表示されました。（注：IE11では動きません。Edgeでは動きます。IE対策は別記事で。）
動かなかったサンプルと動いたサンプルの違い
このページ内で登場した動かなかったサンプルと動いたサンプルの違いは、2点あります。1点目は、動いた方のサンプルには以下の一行が追加されていることです。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>もう一点は、script要素にtype属性が指定されたことです。
<script type="text/babel">共通するのは、「babel」 です。 babel とは何でしょうか。
次回へ続きます。
