React であそぼう
〜 とりあえず「Hello プログラム」 〜
2021-08-10 作成 福島
2022-01-11 更新 福島
TOP > toys > reactjs
前置き (今回もちょっと長め)
React は導入が分かりにくい

なぜかこのページにたどり着いたあなた。
React が動かないのは、あなたのせいではありません。公式 Web ページの情報が最適化されてないせいなのです。
(正式なリリース記述が抜けている上に、最初なのに応用情報が多すぎる)

公式 Web ページには、一見やさしい案内があるように見えますが、その案内を愚直に実行しても React は理解できないようになっています。

嘘に惑わされず、その案内を奥深くまで読み進めば、やっとそこで React が動作します。
よほど勘のいい人でない限り、大抵の初心者はそこに到達するまでに挫折するでしょう。

公式 Web ページが、もっと初心者に優しい内容へ変化してくれることを期待します。

React と React Native の違いが分かりにくい。

開発元が同じ組織である上に名称も似ているため、初心者は自分がどちらを選択すべきか、何が違うのかさえよくわかりません。
ライブラリとフレームワークなんて、プロでもたまに間違える人がいます。
(というか、どっちつかずの製品があるのだけど···)

本稿では「React」を扱います。JSX は使用しません。
そして CDN (Content Delivery Network) である unpkg.com は動的に使用しません。

1. React の導入

React (JavaScript ファイル) をダウンロードして、HTML ファイルと同じ場所に設置します。
(CDN から React を動的にロードすると、CDN の仕様変更によりプログラムが突然動作不能になることがあるので、これを避けるのが目的)

1-1. React の最新バージョンを確認する。

公式 Web ページのトップページを開くと、右上に最新バージョンが表示されている。
ここでは、v17.0.2 が最新バージョン。

↑ このやり方も、いつまで使えるか不明。

1-2. React をダウンロードする。

ブラウザで下記 URL を開き、この JavaScript ファイルを 2 つとも保存する。
(17.0.2 は上記 1-1 で確認したバージョン番号)

以下は Firefox 90.0.2 で保存する例。

CDN ドメイン「unpkg.com」の正体は不明。whois で調べても "DATA REDACTED" (非公開) となっている。
React の公式 Web ページに CDN を利用できると書いてあるが、正式な記述がない。
また、UNPKG のトップページには、npm に関係するものに対応するとの記述があるが、提携がないとも書いてある。
つまり、突然使えなくなるかもしれない。 github も使えるようだが···。
メインスポンサーはアンギュラーらしい。出資の大元は Google ってことで良いのかな。

いくら便利でも、いつ変更になるか知れないサービスを簡単に受け入れられないのは、日本人だからだろうか。
つーか、どうしてみんな普通に <script src="https://よそ様のドメイン/いろいろ.js"> とか出来ちゃうのか不思議。
DNS インジェクションされたり、サーバが DoS を受けたり、コンテンツが更新されたら誤動作するんだけど、分かってるのかな。
→ あらあら、開発者がヤケを起すこともあるらしい。

まあ、「細かいことを気にするやつは使うな」と言われてしまえば、それまでなんだけどね。
2. HTML ファイルの作成
hello.html (上記 1-2 でダウンロードした JavaScript ファイルと同じ場所に作成する)
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 

<html>
<body>
    <script src="./react.production.min.js"></script>
    <script src="./react-dom.production.min.js"></script>

    <div id=msg align=center>ここにメッセージが入る</div>
    <script>
        const cel = document.getElementById("msg") ;
        const val = React.createElement("H1", null, "Hello, React") ;
        ReactDOM.render(val, cel) ;
    </script>
</body>
</html>
うまく動いたら 10 行目をコメントアウトして
    //ReactDOM.render(val, cel) ;
とすると、違う表示になります。
3. 実行
上記 2 で作成した HTML ファイルをブラウザで開く。

以下は Firefox 90.0.2 で表示した例。