Use React Hooks to develop a simple app

React Hooksを使って簡単なShuffle Appを使ってみた！

Transcript

1. By Genki Amagata ReactHooksで開発してみた @React LT会 〜最近学び始めた方から業務でバリバリ使っている方まで〜 社内のシャッフルランチで使うグループ分けアプリ
2. 天方 元紀 株式会社 ウリドキネット 開発マネージャー TW: @GenkiAma Github: genk1 Rails x Vuejsの会社に勤務する、React x Firebaseに興味を持っていろいろ個人開発をして いる非エンジニア。 Web業界に入る前はPepperのアプリケーション開 発や営業、マーケティング業務などやってきた。 今は目下サービスの立ち上げとリリース後のグ ロースで挑戦している。 興味: Firebase x React x JAM stack x 一応Vue
3. 今日の内容 - Projectが始まった経緯 - Projectを始める前にやったこと - 実際に使ってみて - まとめ
4. プロジェクトはいきなり開始した
5. とある打ち合わせ中
6. Genkiくん、シャッフルランチの チーム分けアプリ簡単に作ってよ
7. とある打ち合わせ中 Genkiくん、シャッフルランチの チーム分けアプリ簡単に作って よ
8. ！！？？？
9. とある打ち合わせ中 Genkiくん、シャッフルランチの チーム分けアプリ簡単に作って よ ！！？？？
10. あ、、はい
11. とある打ち合わせ中 Genkiくん、シャッフルランチの チーム分けアプリ簡単に作って よ あ、、はい
12. とりあえずやることを確認
13. やること一覧 - メンバーが一覧で表示されている - 急な参加・不参加に対応できるように簡単なState管理 - 表示するときに順番にゆっくり表示される
15. React Hooksでやってみよう！
16. やること一覧 - メンバーが一覧で表示されている => useState - 急な参加・不参加に対応できるように簡単なState管理 => useReducer - 表示するときに順番にゆっくり表示される => useEffect
17. useState とは You might have previously known these as “stateless components”. We’re now introducing the ability to use React state from these, so we prefer the name “function components”. これまでstate管理をするにはClass Componentでしかできなかったけど 昔 の Stateless Components => 現: function componentsで出来るように なったってことね！
18. useState とは
19. useEffect とは If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. これまでのClass ComponentにおけるLifecycle、 componentDidMount | DidUpdate | WillUnmount が簡単に使える 機能ね！
20. useEffect とは
21. useReducer とは An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.) ReduxでやっていたようなDispatchが必要になるState管理ができるように なるってことね
22. useReducer とは
23. 実際のアプリはこんな感じ github: https://github.com/genk1/shaffle-lunch
24. 実際のアプリ
25. 参考にしているサイト - Pod Cast : https://reactpodcast.com - React : https://chantastic.org/
26. 今後やっていくこと
27. 今後やっていくこと - ログイン機能 - ページング - useContext API
28. まとめ
29. まとめ - Classから書き換えなくていいからめっちゃ楽 - 結構 useEffectが使いやすい - useStateの formはまだ必要性がわかっていない