React初心者がReact初めてみてReactが少しわかったときに話すお話（ハマった編）

React初心者が初心者ゆえにハマった問題を自分なりの解決策も踏まえ解説しています。

Transcript

1. React初心者が React始めてみて Reactが少しわかったときに 話すお話（ハマった編） ocws presents for React初心者
2. 自己紹介 ocws / 奥田 光輝 twitter: @o9n https://ocws.jp フリーランス / フロントエンドエンジニア
3. Reactの環境 React + Redux
4. 参照: https://qiita.com/mpyw/items/a816c6380219b1d5a3bf Reduxのフロー
5. ワケワカメ
6. 1. そもそもルールがわからない
7. 1. そもそもルールがわからない ・そもそもどうやって動いているのかがわからない ・actionを呼び出したらなんでreducerが動く？ ・setStateって使っていいんだっけ？ ・mapって何なんだよ。。
8. Reduxのフロー 参照: https://qiita.com/mpyw/items/a816c6380219b1d5a3bf
9. ベースをつくった こうやって理解した。 1. そもそもルールがわからない
10. 1. そもそもルールがわからない ocws的イメージ Action Reducer Component Store Component が、Action関数 を呼び、 Action関数 が実行されると Reducer が実行され、 Reducer によって Store の情報を書き換わる。
11. 2. コレ、React？ Redux？
12. 2. コレ、React？ Redux？ ・state ・props ・render ・propTypes ・Component 　など React組 ・store ・connect ・createStore ・combineReducers 　など Redux組
13. 2. コレ、React？ Redux？ ・map ・Spread Attributes 　(Spread演算子) ES2015組 {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )}
14. 2. コレ、React？ Redux？ 慣れ こうやって理解した。
15. 3. mapStateToPropsとmapDispatchToProps
16. 3. mapStateToPropsとmapDispatchToProps mapStateToProps mapDispatchToProps connect
17. めっちゃええやつ こうやって理解した。 3. mapStateToPropsとmapDispatchToProps
18. 3. mapStateToPropsとmapDispatchToProps mapStateToProps そのコンポーネントでpropsを追加できる道具 mapDispatchToProps そのコンポーネントでactionを即呼びできる道具
19. 3. mapStateToPropsとmapDispatchToProps mapStateToProps そのコンポーネントでpropsを追加できる道具 props これも入れたって！ A-props B-props C-props mapStateToProps
20. 3. mapStateToPropsとmapDispatchToProps mapDispatchToProps そのコンポーネントでactionを即呼びできる道具 Compornent 孫 Action Aさん 使いたいっす。。 Action A mapDispatchToProps Action Creator 孫コンポーネント 孫さん
21. 3. mapStateToPropsとmapDispatchToProps connect ComponentとmapStateToPropsとmapDispatchToPropsを繋ぐ connect Component mapStateToProps mapDispatchToProps Packed!!
22. 勉強法
23. 勉強法 ・とりあえず、コードを書きまくる ・公式リファレンスを読む ・イベントに参加する（ハンズオンやもくもくが最適） ・ESlint ・学習動画サービスを見る（Udemy）
24. 参照元 https://giphy.com/gifs/reaction-what-despicable-me-SqmkZ5IdwzTP2 https://giphy.com/gifs/nba-basketball-chicago-bulls-3o6YglDndxKdCNw7q8 https://giphy.com/gifs/realitytvgifs-britney-spears-confused-funny-face-JSueytO5O29yM
25. ご清聴ありがとうございました