Develop simpleappwithreacthooks
- 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を始める前にやったこと - 実際に使ってみて - まとめ
- 5. とある打ち合わせ中
- 8. ！！？？？
- 10. あ、、はい
- 12. とりあえずやることを確認
- 13. やること一覧 - メンバーが一覧で表示されている - 急な参加・不参加に対応できるように簡単なState管理 - 表示するときに順番にゆっくり表示される
- 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 とは
- 24. 実際のアプリ
- 25. 参考にしているサイト - Pod Cast : https://reactpodcast.com - React : https://chantastic.org/
- 26. 今後やっていくこと
- 27. 今後やっていくこと - ログイン機能 - ページング - useContext API
- 28. まとめ
- 29. まとめ - Classから書き換えなくていいからめっちゃ楽 - 結構 useEffectが使いやすい - useStateの formはまだ必要性がわかっていない