Reactの公式チュートリアルをやってみた＆メモ
- React v0.13.0
感想
- 身構えるほど難しくないよ
- 覚えることって実は意外と少ない
- 雑に言うと、今までDOMの中に直接書いていたことをJS側に寄せただけ、だがそれがいい
- 準備時以外
index.htmlを触っていない → 記述箇所の集約、影響範囲の限定
公式 Getting Started
- Getting Started | React
- HTMLに react.js と JSXTransformer.js を読み込んで使う
<script type="text/jsx">の中に JSX syntax でスクリプトを書く<script type="text/jsx" src="src/helloworld.js"></script>で外部化
- JSX → JS のブラウザ内変換方式ではコンソールに警告が出る
You are using the in-browser JSX transformer. Be sure to precompile your JSX for production
- npm の react-tools を使って jsx を js に自動変換しましょう
- npm 古かったのでアップデートしとくか → つまずく
- Node.js と npm のアップデート – nocorica
$ jsx --watch src/ build/で src フォルダ内の変更を監視しますsrc/helloworld.js(JSX) を変更するとbuild/helloworld.js(JS) が吐かれるscript type="text/jsx"と JSXTransformer.js によるブラウザ内変換が不要になる- HTMLに読み込み指定するのはJSXではなくJSの
build/helloworld.js
- ちょっと試す分には別にnpm使う必要なかった…
公式 Tutorial
Tutorial | React
コメントボックスのコンポーネント作成チュートリアル
React.render
ReactComponent render( ReactElement element, // React.createClassで作ったやつ DOMElement container, // 配置先のDOM要素 [function callback] )
- 一度描画すると以降は変更が必要な箇所をReactが判断してくれて差分更新となる
- 現状、第2引数の
containerに指定した先の要素内を上書きする動きとなっている - 将来的にすでに存在する子要素を上書きすることなく差し込むことが可能になるかも*1
- コンポーネントはネストできる
- CommentBox
- CommentList
- Comment
- CommentForm
- CommentList
- React.render を呼ぶタイミングに注意。描画に必要なオブジェクトを読み込んでから（当然）。
- CommentBox
Using props
- 子のコンポーネント使用時に要素の属性や内容を受け渡しできる
<Comment author="Pete Hunt">This is <b>one</b> comment</Comment>
<div className="comment">
<h2 className="commentAuthor">
{this.props.author} // Pete Hunt
</h2>
{this.props.children} // This is <b>one</b> comment
</div>
- コンポーネントオブジェクトを文字列化するには
toString()
Reactive state
propsare immutable- データが変化するものは
stateを使うthis.setState()で変更を適用すると再描画される
getInitialStateはコンポーネントが生成された時に一度だけ呼ばれるcomponentDidMountis a method called automatically by React when a component is rendered.
submit
onSubmit={this.handleSubmit}で処理を紐付け- キャメルケース
preventDefault()する（React特有の話ではない）
- コンポーネントのDOM要素属性にて
ref="author"と書くと、React.findDOMNode(this.refs.author)で生DOMを参照できる
- 子コンポーネントで発火したイベントの親への伝搬は意図して記述する必要がある
- AjaxでPOSTしてサーバに反映し、それを取得してから描画していては反応が遅く感じられる
- 先にコンポーネントに対して
this.setState()で差分を反映して体感を早められる
- 先にコンポーネントに対して
