React関連の勉強
サイト制作するわけでないけど、ある程度、どういう実装になるかはしっておかないと。
JSX(JavaScript Xml) :: JSX is a XML-like syntax extension to ECMAScript without any defined semantics
サーバーからデータを取得して更新の流れ。
以下がわかりやすい解説。
getInitialState(), reder()で初期化、
componentDidMount()してその際にxhrでデータ取得・セット。 setState()
setState()で自動的に render()の再実施。セットしたデータでDOM構築。
ただ、javascriptを入れてexucuteするためには、render()あとに、componentDidUpdate()がいる?
render()だけだと、javascriptが実行されない。componentDid(mount|update)する。
これだとそういう形で、componentDidMountで eval()してる。componentDIdUpdate()で同じようにやる?
ただ、ライブラリとしては、最初のGTMスニペットの埋め込みからreactのcomponentに任せるので、too muchかも。
最初はmoutingでcomponentDidMout, 更新はupdatingでcomponentDidUpdate,
親子関係みたいな形(どちらも React.Componentを継承したクラス)でコンポーネントを作成して、ReactDom.reader()する
こういうのは、compositeComponentとよんでよいのか?
(この記事からではないが)
component間の値の受け渡しは、送る側は属性値みたいに書いて、受け取る側はthis.props.xxx みたいにする。
SSR(server side rending)
react単体でレンダリング
サーバー側でreactコンポーネントをstringにしてresponseで返す。クライアント側では、ReactDom.reader()を使って、html文字列をDocument化?
サーバー側で、(非同期)でデータを取る際には、取ったデータを、<script>タグでデータとして渡して、Componentにpropsとして渡す
react+ react router
まだ理解(読めて)ない
素直な感じにみえるが、簡単なAPIサーバーならこれもありなのかも。
これも理解に役立ちそう
自分の言葉でのReactとは
Copmponentクラスの宣言でDomを作る
render()(クラス)メソッドで、HTMLのようなもの(JSXで、実際はtemplateのようなもの? )を返す
ライフサイクルを持っており、getInitialState, ComponentDidMountなどで、そのイベントでのhook関数を実行できる。
Componentは、入れ子構造
データの受け渡し
propsで親から子にデータを渡せる。関数のパラメータみたいな感じで捉えればよい。
immutable
値の変更は、stateオブジェクトで行う。