angular-to-react

React

React

• XML likeな構文(JSX)でComponentを定義
  • Componentを組み合わせてViewを構築
• 子Componentへの値の受け渡しにはPropsを使う
• ユーザーの操作などで変化する値にはStateを使う
• Componentの各状態においてLifecycle Methodが定義されてるのでよしなに使う

Reactを使うにあたって

http://facebook.github.io/react/docs/thinking-in-react.html

Component

Component

• 実際に組み始める前にComponentの設計をする
  • 折角なのでBEMで考えてみる

.members                         ->  <Members />
.members__list              ->  <MembersList />
.members__list__row  ->  <MembersListRow />
.member-edit                  ->  <MemberEdit />

Component

• JSXでXMLのattributeのように書くことでComponentへPropsを渡すことができる
  • BEMのclassNameをPropsを使って渡してみる

# <Members className="members" />

Members = React.createClass
  render: ->
    bemClassName =
      list: "#{@props.className}__list"
    <MembersList className={bemClassName.list} />

State

State

• getInitialStateでstateを初期化
• setStateでstateの値を変更
• componentDidMountでAPIリクエストをしてsetStateで更新するといいらしい
• 子Componentでstateの内容が変更されたら、イベントで親まで戻してあげる

MembersList = React.createClass
  getInitialState:
    member: null
  componentDidMount: ->
    Api.members.get().done (member) =>
      @setState member: member
  handleMemberEdit: (member) ->
    @setState member: member
  render: ->
    <MembersListRow
      member={@state.member}
      onMemberEdit={@handleMemberEdit} />

MembersListRow = React.createClass
  handleSave: ->
    @props.onMemberEdit(member)
  render: ->
    <MemberEdit
      member={@props.member}
      onSave={@handleSave} />

State

• 基本的にはStateは多用せずにPropsを使う
  • 親からpropsで与えられてたら、stateじゃない
  • 変化するものじゃなかったら、stateじゃない
  • 他のstateやpropsから処理されるものだったら、stateじゃない

http://facebook.github.io/react/docs/thinking-in-react.html#step-3-identify-the-minimal-but-complete-representation-of-ui-state

AngularJS vs React

DOM Component

• ReactのComponentの方が分割しやすい
  • 責任範囲を小さくできるのでコードが煩雑化しにくそう
  • 大きなComponentも作ろうと思えば作れるので設計大事
• className(Props)の引き回しでBEMが快適になる
  • class=""に頑張って書かなくていいのは嬉しい
  • やり過ぎると大変なことになりそうなのでほどほどに

State change

• ngScopeが優秀
  • React.addonsのReactlinkを使うとtwo-way bindingできるらしい
• Componentのネストが深くなるとイベントで戻すのが辛くなる
• React.addonsのclassSetを使うとAngular likeにclassNameの切り替えができる

まとめ

まとめ(感想)

• AngularJSやBackbone(Marionette)と比べるとViewのコンポーネント化がしやすい
  • BEMを始めCSSの設計手法との相性も良さそうな印象
• State周りはReactlinkを使うのが正解な気がする
• 他にもngAnimate風にアニメーションの指定ができるMixinがあったり面白そう
• JSXの取っ付きづらさに慣れると使いやすい

https://github.com/cancer/react-SavageApp