React

【React】hello_react.JSXの解説

どうも、とがみんです。

以下の記事で、Ruby on RailsにReactを導入する方法について紹介しました。


この記事では、Ruby on Railsに置いて、Reactを導入した際に作られる、hello_react.jsxファイルに記述されているコードについて説明します。

hello_react.jsxファイルについて

以下のコードがhello_react.jsxに書かれているコードです。

それぞれのコードが何を表しているのかを考えて行きます。

ファイルの読み込み

別のファイルに記述されたコードを読み込む際にimportを利用します。

以下のコードについて説明します。

importは、別のファイルで記述された、オブジェクトを読み込み、ファイル内で使えるようにするためのものです。

>【React Native】基本構文の解説

上記の3行で読み込んでいる、reactreact-domprop-typeについて紹介して行きます。

react

「react」はユーザーインターフェースを構築するためのJavaScriptライブラリで、Reactのコンポーネントを定義するために必要な機能のみが含まれています。

>react|npm

react-dom

「react-dom」は、Reactのための、DOMの操作とサーバーレンダリング機能を提供します。

web用のコンポーネント作成に置いて、reactと一緒に用いられます。

ちなみに、iOS、Android等ネイティブアプリ用はreact-nativeです。

>react-dom|npm

サーバーサイドレンダリング:DOMをサーバー側で生成してからフロントに返すこと。

prop-types

「prop-types」は、Propの型情報をチェックできるようにするツールです。

>prop-types|npm

>「prop-types」でPropsのデータ型を担保する

定数の宣言

定数を宣言する際に、constを利用します。

上記は、Helloという定数に、<div>Hello {props.name}!</div>が代入されます。

このとき、引数としてpropsの値が渡されています。

デフォルトpropsの宣言

以下のコードでは、propsのデフォルト値に‘David’を設定しています。

propTypesにて型の制約の指定

以下のコードで、propsnameに入る型を指定しています。

指定することによって、値を受け取った際に、肩のチェックを行ってくれます。

「Hello React!」の表示

addEventListener()は、様々なイベント処理を実行することができるメソッドで、上記はDOMContentLoadedとあるので、DOMツリーの構築が完了した時点で呼ばれます。

Helloオブジェクトpropsnameに「React」という文字列が代入されます。

最後のdocument.body.appendChild(document.createElement(‘div’))により、divタグで囲まれた<Hello name=”React” />の内容が、bodyタグが終了する直前に表示されます。

まとめ

Ruby on RailsにReactを導入後に作成されるhello_react.jsxファイルの中身について説明しました。

参考文献