React Tutorial

react_tutorial.md

Tutorialでは$.ajaxを使うためにjQueryを読み込んでいるが、 Reactを使うにあたっては、DOM manipulationは行ってはいけない

Component

• React.createClassでComponentを作る
• renderでComponent(JS or JSX)を返す
• class="hoge"ではなくclassName="hoge"
• renderComponent(Component, DOMElement)で対象の要素にレンダリング
• Component(args)でoptionを渡せる
• <Component foo="foo" />の形で親Componentから子Componentへ値を渡せる
• これが props

props

• propsはimmutable(不変)な値
• propsに渡された値は、子Componentからthis.propsで受け取れる
• JSXで変数を展開するには{}で囲む
• renderComponentからも渡すことができる
• render内でデータを整形してJSXにすることも可能

state

• 操作可能な値
• 子Componentからはthis.stateでアクセス可能
• this.setState(args)でstateを変化させることができる
• stateが変わると再レンダリングが走る
• getInitialState()でstateを初期化する
• stateの初期値を返す
• Componentがレンダリングされると、componentDidMountが呼ばれる
• サーバーからデータをfetchする場合、この中で実行してthis.setStateに渡す

event

handling

• JSXにonSomeEvent={this.someEventHandler}の形で書く
• 通常のDOMEventと同様に、Eventが引数に渡されるのでsomeEventHandler (e) -> e.preventDefault()とかできる

trigger

• 親ComponentにonSomeCustomEvent={this.someCustomEventHandler}の形で書いておく
• 子Componentでthis.props.onSomeCustomEvent(args)で親で指定したcallbackを(引数を渡して)実行することができる

refs

• JSXにref=fooの形で書くと、Componentからthis.refs.fooで参照することができる
• this.refs.foo.getDomNode()でDOMElementを返してくる

XSS対策

• dangerouslySetInnerHTML={{__html:rawHTML}}で、生のHTMLを渡すとsanitizeを行うことができる