どうも、とがみんです。
以下の記事で、Ruby on RailsにReactを導入する方法について紹介しました。
この記事では、Ruby on Railsに置いて、Reactを導入した際に作られる、hello_react.jsxファイルに記述されているコードについて説明します。
Contents [hide]
hello_react.jsxファイルについて
以下のコードがhello_react.jsxに書かれているコードです。
それぞれのコードが何を表しているのかを考えて行きます。
ファイルの読み込み
別のファイルに記述されたコードを読み込む際にimportを利用します。
以下のコードについて説明します。
importは、別のファイルで記述された、オブジェクトを読み込み、ファイル内で使えるようにするためのものです。
上記の3行で読み込んでいる、react、react-dom、prop-typeについて紹介して行きます。
react
「react」はユーザーインターフェースを構築するためのJavaScriptライブラリで、Reactのコンポーネントを定義するために必要な機能のみが含まれています。
react-dom
「react-dom」は、Reactのための、DOMの操作とサーバーレンダリング機能を提供します。
web用のコンポーネント作成に置いて、reactと一緒に用いられます。
ちなみに、iOS、Android等ネイティブアプリ用はreact-nativeです。
サーバーサイドレンダリング：DOMをサーバー側で生成してからフロントに返すこと。
prop-types
「prop-types」は、Propの型情報をチェックできるようにするツールです。
定数の宣言
定数を宣言する際に、constを利用します。
上記は、Helloという定数に、＜div＞Hello {props.name}!＜/div＞が代入されます。
このとき、引数としてpropsの値が渡されています。
デフォルトpropsの宣言
以下のコードでは、propsのデフォルト値に‘David’を設定しています。
propTypesにて型の制約の指定
以下のコードで、propsのnameに入る型を指定しています。
指定することによって、値を受け取った際に、肩のチェックを行ってくれます。
「Hello React!」の表示
addEventListener()は、様々なイベント処理を実行することができるメソッドで、上記はDOMContentLoadedとあるので、DOMツリーの構築が完了した時点で呼ばれます。
Helloオブジェクトのpropsのnameに「React」という文字列が代入されます。
最後のdocument.body.appendChild(document.createElement(‘div’))により、divタグで囲まれた＜Hello name=”React” /＞の内容が、bodyタグが終了する直前に表示されます。
まとめ
Ruby on RailsにReactを導入後に作成されるhello_react.jsxファイルの中身について説明しました。
参考文献
