AngularJSで作ったアプリをReactで置き換えてみた

Transcript

1. AngularJS で作ったアプリ をReact で置き換えてみた
2. React
3. React XML like な構文(JSX) でComponent を定義 Component を組み合わせてView を構築 子Component への値の受け渡しにはProps を使う ユー ザー の操作などで変化する値にはState を使う Component の各状態においてLifecycle Method が定義され てるのでよしなに使う
4. React を使うにあたって 1. Component を洗い出す 2. static に作ってみる 3. State を使うべきところを洗い出す 4. State を置くところを決める 5. 子から親へデー タを戻す http://facebook.github.io/react/docs/thinking-in-react.html
5. Component
6. Component 実際に組み始める前にComponent の設計をする 折角なのでBEM で考えてみる .members -> <Members /> .members__list -> <MembersList /> .members__list__row -> <MembersListRow /> .member-edit -> <MemberEdit />
7. 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} />
8. State
9. 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
10. 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
11. AngularJS vs React
12. DOM Component React のComponent の方が分割しやすい 責任範囲を小さくできるのでコー ドが煩雑化しにくそう 大きなComponent も作ろうと思えば作れるので設計大事 className(Props) の引き回しでBEM が快適になる class="" に頑張って書かなくていいのは嬉しい やり過ぎると大変なことになりそうなのでほどほどに
13. State change ngScope が優秀 React.addons のReactlink を使うとtwo-way binding でき るらしい Component のネストが深くなるとイベントで戻すのが辛く なる React.addons のclassSet を使うとAngular like にclassName の切り替えができる
14. まとめ
15. まとめ( 感想) AngularJS やBackbone(Marionette) と比べるとView のコンポ ー ネント化がしやすい BEM を始めCSS の設計手法との相性も良さそうな印象 State 周りはReactlink を使うのが正解な気がする 他にもngAnimate 風にアニメー ションの指定ができるMixin があったり面白そう JSX の取っ付きづらさに慣れると使いやすい https://github.com/cancer/react-SavageApp
16. ご清聴ありがとうございました