「React会 #1」に参加してきました

  • React会 #1に参加してきました。

react-kai.connpass.com

  • React Hooksで盛り上がってる中でのReactのイベントということで、最新情報をキャッチアップできる勉強会でした。
  • React会は今後React meetupと合流するということで、Reactコミュニティの盛り上がりにも期待してます。
タイトル 登壇者
typescript-fsaに頼らないReact/Redux camcam_lemonさん
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 大岡由佳@oukayukaさん
ReactNative(Expo) + Firebaseを使って爆速でアプリを作る はがさん
React Hooksで遊ぼう yamatatsuさん
Context APIを使ったライブラリを作った dai_shiさん

typescript-fsaに頼らないReact/Redux

  • camcam_lemonさん

Component

Stateful Component

  • interfaceかtypeでprops/stateを宣言

Stateless Functional Component

  • React.SFC<P>で型付ける

Container

  • maoStateToProps
  • mapDispatchToProps
    • reduxのDispatchで型つける

Action

  • actionのtypeプロパティにas typeof xxx
  • typeをただの文字列じゃなくて型として扱える

Reducer

  • Conditional typeのReturnTypeを使ってActionを型定義
  • switch文で該当するものがなければdefaultでnever型で拾う
    • 受け取るActionが一つの時はnever使えない
    • if使う

まとめ

  • tsの機能だけでいい感じに型をつけることができる
  • ActiontReducerのテンプレを崩さずに書けるのがいい

Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察

  • 大岡由佳@oukayukaさん

技術書店で本出した

  • Reactの本
  • RecomposeとHOCの話も書いてた
  • その数日後ReactConfでReact Hooks発表
  • Recoposeは開発終了今後はReact Hooksでとのアナウンス
  • 嘆いてたらDan先生からDMが来た

Recomposeとは

  • 関数コンポーネントやHOCのためのReactユーティリティ
  • 関数コンポーネントにローカルステートやライフサイクルメソッドが追加される
  • Reduxのconnectなんかがそれ

なぜRecomposeは開発をとめるのか

  • Recomposeの作者がfacebookにジョインしてHooksを作った
    • withStateとuseStateがそっくり

これからどうなるか

  • ReactHooks反響大きすぎて後戻りすることはない
  • HOC, Render Propsもフェードアウトしていくのではないか
  • classコンポーネントもそのうち非推奨になりそう
  • Reduxがなくなることはないのでは
    • connectがuseReduxのようなインターフェースになるのでは

github.com

ReactNative(Expo) + Firebaseを使って爆速でアプリを作る

  • はがさん(FACTBASE)

docs.google.com

サンプルアプリ

Expo

  • ReactNative開発をWeb開発に近づけるプラットフォーム兼ライブラリ
  • アプリのビルドをせずとも実機で動作確認できる

ReactNativeのライブラリ

  • ReactNavigation
    • ナビゲーションライブラリ
  • NativeBase
    • UIライブラリ
  • react-native-swiper
    • 画像のスワイプ簡単に作れる
  • react-native-gifted-chat
    • チャット風UIを簡単に作れる

まとめ

  • OSSを活用すると爆速で作れる
  • Expo使うことでビルドで実機とPCを繋がなくてよかった

React Hooksで遊ぼう

  • yamatatsuさん

React Hooks

  • 三行で言うと
    • Functional Componentで状態を持てる
    • Functional Componentでupdate系のイベントを扱える
    • Consumer無しでContextを使える とかとか

useState

  • Functional Componentでstate持てる

useReducer

  • reducerっぽく使えるuseState

useCallback

  • memoKeyが変わらない限り一回しか実行されない
  • 一回だけ走って欲しいやつに使う

useMemo

  • useCallbackに似てる
  • 関数の戻り値をくれる

uesRef

  • createRef的な

DidMount

  • Dan先生曰くSuspenceを待たれよとのこと

Context APIを使ったライブラリを作った

  • dai_shiさん

ContextAPI

  • React16.3ではいった
  • Reduxの代替になるのではと噂に
  • コンポーネントツリーの階層をジャンプして値を渡すことができる
  • Providerで値を渡してConsumerで値を受け取る
  • State管理できるわけではない
  • npm化した

github.com

React Hooks

  • React Hooksで世界が変わる
  • classでしかできなかったことがなくなる
  • hooks版も作った

github.com

itnext.io