図とコード例で多分わかる React と flux (工事中)
- 1. 図とコード例で多分わかる React と Flux (工事中) 開発部 てるー
- 4. React の特徴 ● JUST THE UI ● VIRTUAL DOM ● DATA FLOW
- 5. Backbone ● View ● Routing ● HTTP Client ● Model
- 6. AngularJS ● View ● Routing ● HTTP Client ● Model (?)
- 7. React ● View ● Routing ● HTTP Client ● Model
- 8. JUST THE UI var ToDoApp = React.createClass({ render: function() { return ( <div> <Header /> <MainSection /> <Footer /> </div> ); } }); React.render(<ToDoApp/>, document. getElementById(‘todoapp’); var Header = React.createClass({...}); var MainSection = React.createClass({ render: function() { return ( <section> <input type=”checkbox”/> <label>Mark all as complete</label> <ul>{todos}</ul> </section> ); } }); var Footer = React.createClass({...});
- 9. VIRTUAL DOM (1 / 4) A B C D E F REAL DOM VIRTUAL DOM A B C D E F
- 10. VIRTUAL DOM (2 / 4) A B C D E F REAL DOM VIRTUAL DOM A B C’ D E F’ G
- 11. VIRTUAL DOM (3 / 4) A B C D E F REAL DOM VIRTUAL DOM A B C’ D E F’ G
- 12. VIRTUAL DOM (4 / 4) A B C’ D E F’ REAL DOM VIRTUAL DOM A B C’ D E F’ G G
- 13. DATA FLOW コンポーネントのプロパティ ● props ○ 入力データ(不変) ● state ○ 内部データ(可変) A B C D E F props props props propsprops
- 14. DATA FLOW var ToDoApp = React.createClass({ render: function() { return ( <div> <Header /> <MainSection todos={this.state.allTodos}/> <Footer /> </div> ); } }); var MainSection = React.createClass({ render: function() { return ( <section> <ul> {this.props.todos.map(function(todo) { return (<TodoItem key={todo.key} todo={todo}/>); )} </ul> </section> ); } });
- 18. Flux (オブジェクトの参照) Dispatcher ActionCreator Views Stores メソッドを実行 メソッドを実行 コールバックを登録 コールバックを登録 データの取得
- 19. Flux の例 (1 / 8) Dispatcher ToDoAction TodoListView TodoStore TODO_DESTROY メッセージがきたら教えて！ データが変わったら 教えて！
- 20. Flux の例 (2 / 8) Dispatcher ToDoAction TodoListView TodoStore ToDo を 削除してください！
- 21. Flux の例 (3 / 8) Dispatcher ToDoAction TodoListView TodoStore ToDo を 削除してください！サーバーから ToDo を消した！
- 22. Flux の例 (4 / 8) Dispatcher ToDoAction TodoListView TodoStore ToDo を 削除してください！ ToDo を削除しました！ TODO_DESTROY メッセージを発行して ください！ サーバーから ToDo を消した！
- 23. Flux の例 (5 / 8) Dispatcher ToDoAction TodoListView TodoStore ToDo を 削除してください！ ToDo を削除しました！ TODO_DESTROY メッセージを発行して ください！ TODO_DESTROY メッセージが来たよ！ サーバーから ToDo を消した！
- 24. Flux の例 (6 / 8) Dispatcher ToDoAction TodoListView TodoStore ToDo を 削除してください！ ToDo を削除しました！ TODO_DESTROY メッセージを発行して ください！ TODO_DESTROY メッセージが来たよ！ サーバーから ToDo を消した！ 自身から該当の ToDo を消した！
- 25. Flux の例 (7 / 8) Dispatcher ToDoAction TodoListView TodoStore ToDo を 削除してください！ ToDo を削除しました！ TODO_DESTROY メッセージを発行して ください！ TODO_DESTROY メッセージが来たよ！ サーバーから ToDo を消した！ 自身から該当の ToDo を消した！ データ変わったよ！
- 26. Flux の例 (8 / 8) Dispatcher ToDoAction TodoListView TodoStore ToDo を 削除してください！ ToDo を削除しました！ TODO_DESTROY メッセージを発行して ください！ TODO_DESTROY メッセージが来たよ！ サーバーから ToDo を消した！ 自身から該当の ToDo を消した！ データ変わったよ！ 画面から該当の ToDo を消した！
- 27. お わ り