Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
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ファイルの中身について説明しました。

参考文献