railsでreact.js入門(2)

前回のおさらい

react.jsをやってみたいけどよくわからない ↓ railsのgemとしてならとっつきやすそう ↓ ganerateコマンド２つ叩いてちょっと手を加えるだけでHello Worldが表示できた＼(^o^)／

環境

Rails 5.0.2 ruby 2.3.3p222 react-rails 1.11.0

参考サイト

本家大本：公式チュートリアル railsでのチュートリアルを説明してくださっているサイト：react-railsを使ってReactのTutorialをやってみる

Tutorial再開

引き続き各章ごとに学んだこと、考察などを並べていく。

Composing components

この章ではjsxで定義するDOMを増やした。 学んだこと

• jsx内で定義した他のDOM要素はHTMLタグっぽく下記のように呼び出す

<変数名 />

疑問点

• 呼び出されるDOM要素はどのように決定されるのか？
  1. 変数名を精査して指定された名前と同じ変数が呼び出される
  2. 一番最初に宣言された変数が表示される
  3. 宣言されたDOMを精査して一番親となるDOMが呼び出される

・・・色々実験してみた

1. 変数を宣言する順番を入れ替える ↓ 変化なし よって2案却下

2. 変数名を入れ替える ↓ CommentBoxとCommentListを入れ替えたところ、元CommentListの内容が表示された。 今回表示されたDOMは他のDOMに内包される子DOMなので3案も却下 結果 変数名を精査して指定された名前と同じ変数が呼び出されるっぽい

Using props

jsxでは一つ一つのHTMLタグっぽいもの（Componentと言うらしい）は変数を保持していて、{}の中でthis.props.~というふうにアクセスできるらしい。

Component Properties

もちろん逆に変数を設定することができて、 基本的には HTMLの属性っぽく<>の中で変数名 = ~ って感じで設定して 閉じタグとの間に挟むとchildrenという変数名で格納されるらしい 変数というか、外部から値を渡すための引数というのが近そうだ。

Adding Markdown

本筋とは関係ないので飛ばします 要はページの一部にMarkdown記法での表記を適用する方法らしい。

Hook up the data model

jsxファイル外からデータを渡す話その１ ヘルパー内でデータを渡すことができ、jsxからはthis.prop.~でアクセスできる。

Fetching from the server / Reactive state / Updating state

jsxファイル外からデータを渡す話その2 apiを作ってそこからデータを引っ張ってきたい 手順は三段階

1. jsonデータを返すapi作成
2. apiのurlをヘルパーから渡す
3. jsxファイル内でajaxを使い、apiからデータを受け取る

この三段階目でreactのpropとstateの違いが問題になる。 reactでは外部からのデータを保持する変数としてpropとstateがある propはImmutableで、一度データを取得したらそれ以降は変更されないデータを扱う。 stateはMutableで、ユーザーのアクションによって変化するデータを扱う。

stateはMutableではあるが、勝手に中身を変えてはいけない。 変えるときは必ずsetState()メソッドを使用する。

jsxのコンポーネントには所謂イニシャルメソッドのようなものが２つ用意されているようだ stateの初期値の設定はgetInitialState() 初めて呼び出されたときに実行するのはcomponentDidMount()

とりあえず今回はここまで。 後ちょっとなので次回完結します。