入門 React

作成日 : 2021-05-13
最終更新日 :

概要

副題は、コンポーネントベースの Web フロントエンド開発

感想

付録 A

付録 A では、開発機能の構築について述べられている。 Node を使わない環境構築手順として、React v0.13.0 の React ファイルを取得する方法が述べられている。 その方法では、まず、下記の React のオフィシャルサイトに行くことが求められている。
http://facebook.github.io/react/downloads.html
では、現在はどうなのだろうか。

上記のサイトにアクセスすると、下記にリダイレクトされる:
https://reactjs.org/docs/getting-started.html
日本語サイトもある。
https://ja.reactjs.org/
ただ、このサイトを見ても、React ファイルをダウンロードするというページが見当たらない。 なお、React のバージョンは 2021-05-13 現在 17.0.2 である。 では、最初にどうすればいいのか。

最初にどうすればいいのかを考える前に、p.226 の記載を見る。本文には、次のように書かれている。

さらに、以下のように index.html に JSXTransformer を追加してください。

		<DOCTYPE html>
		<body>
		<script src="js/react.js"></script>
		<script src="jsx/app.js" type="text/jsx"></script>
		</body>
	

実は、上記のコードで、2つの script 文の間に、JSXTransformer を追加する文が漏れている。 しかし、これを指摘しても仕方がない。というのは、React のバージョン 0.14 以降は、 JSXTransformer は非推奨 (deprecating) となっているからだ。
https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

次の p.227 では react-tools を使用して事前に JSX 変換する、 という表題で標記のツールを使用する方法が紹介されている。しかし、react-tools も非推奨となっている。 上述の reactjs.org のブログにある。

ではどうすればいいのか、ということになる。まず、react.js はローカルにダウンロードする必要はない。 さらに、react.js から DOM に関する部分が分離され、2つになっている。Ver. 17 の場合は、 次のように記述するのが一例である:

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

app.js に相当するところはどう書けばよいか、ということについては、次の例を参考にするといいだろう。
https://ja.reactjs.org/docs/add-react-to-a-website.html

誤植

p.226 に、JSXTransformer を追加すべき場所のコードが漏れている件を指摘した。そのほか、 見つけたら報告する。

書誌情報

書 名入門 React
著 者Frankie bagnardi, Jonathan Beebe, Richard Feldman, Tom Hallet, Simon Højberg, Karl Mikkelsen
発行日20XX 年 X 月 XX 日(初版第1刷)
発行所
定 価
サイズ
ISBN978-4-87311-7319-5

まりんきょ学問所コンピュータについてコンピュータの本JavaScript > Frankie bagnardi, Jonathan Beebe, Richard Feldman, Tom Hallet, Simon Højberg, Karl Mikkelsen:入門 React


MARUYAMA Satosi