未来を創る、テックコミュニティー

6/11 代表勉強通信~Reactのお勉強②

草場代表
2020/06/11

こんばんは。代表の草場です。

うまくことが運ばずの一日でした。
引き続き、「Learning React: A Hands-On Guide to Building Web Applications Using React and Redux, Second edition」を読んでいます。

二章は、「Building Your First React App」です。

Web アプリは HTML、CSS、JavaScript で構成されています。ここからがReactの特殊性の出番です。通常のHTML、CSS、JavaScriptに加えて、Reactのコードの大部分はJSXで書かれます。JSXはJavaScriptとHTMLのようなタグを混ぜて、ユーザーインターフェイス(UI)要素とその機能を定義することができる言語です。ただし、ブラウザはJSX をどうすればいいのかわからないです。React を使って Web アプリを構築するには、JSX をブラウザが理解できるようなJavaScript に変換する方法が必要です。これは面倒。これに対する2つの解決策があります。

1.Nodeを中心とした開発環境とビルドツールをセットアップする。こうすると、ビルドを実行するたびに、すべてのJSXが自動的にJSに変換され、JavaScriptファイルのように参照できるようにディスクに配置される。
2. ブラウザが実行時にJSXを自動的に JavaScript に変換する。JavaScript と同じようにJSXを直接指定すれば、あとはブラウザが処理してくれる。

この本では、2番目のソリューションを採用しています。最初はコードを書く時間を増やし、開発環境をいじる時間を減らすことができます。このソリューションを使用するには、スクリプトファイルを参照するだけです。このスクリプトファイルは、ページロード時にJSXをJSに変換する処理を行い、開発環境に特別なことをすることなく React アプリを実現します。ただし、ブラウザがJSXをJSに変換するたびにパフォーマンスが低下します。これはReactの使い方を学ぶときには問題ないですが、実際にアプリをデプロイして使用するときには問題が出ます。

ここからは、自分の名前を表示するアプリを作成してきます。これはrenderメソッドを使って行います。bodyのscriptタグの中に記載していきます。

詳しくはまた明日。

明日もReact。

この記事を書いた人
草場代表
エディター