Opening Talk (10min)
React17
- componentWillMount系幾つか非推奨になる
- v17で消える
- 代替があるわけではない
- willmountはconstructorとかでかけと
- context api
- https://reactjs.org/docs/how-to-contribute.html
Talk: Static sites with create-react-app and Junctions (20min)
- @james_k_nelson
- https://reactarmory.com
15分でアプリを作る
- create-react-app
- junctions
- create-react-appだとビルドしたあとのhtmlの中はscriptタグだけ
- SNSとかにはっても何も出ない
- junctionsつかうと対応できる
- junctions staticを使うと複数のhtmlを生成できる
- mdファイル読み込んでcomponent生成できる
- surge
- アプリを公開出来る
- https://surge.sh/
Panel Discussion about React (40min)
- @james_k_nelson
- @yosuke_furukawa
- @yoshiko_pg
- @koba04 (moderator)
Reactに足りないもの
- 業務的にformを作ることが多い
- 入力項目多いときとか
- SSRとその後の画面行く時にスムーズにいかない？
- アニメーションが大変
- ルーター
- 裏側でsetStateして準備できてから遷移とか最近できてきてる
サードパーティライブラリ
- @yoshiko_pg
- reduxは入れる
- redux-formも
- uiは使わないように
- @james_k_nelson
- axios
- classNames
- @yosuke_furukawa
- react-router
- v3からv4で大きく変わった
- onEnterというページに入る直前のフックがなくなっちゃった
- formic
- virtualize
- 全部renderしなくてよくて、見えてるとこだけrenderできるようにする
- https://github.com/bvaughn/react-virtualized
- react-router
- ドラッグアンドドロップ
- ルーターの管理はreactの外側の世界で管理した方がきれいになる
CSSどうしてる
- @yoshiko_pg
- @james_k_nelson
- @yosuke_furukawa
React教える時
- Reduxもまとめて教えちゃう
- 古川さんはReduxおし
- Reactだけでも作れる
- jsxもなくてもいい
- babelとかもいらなくなる
- 複雑にしてるのはレイヤーを分けたいから
- 色んな人が関わって作るからルールを作って強制している効果がある
- html,css分かる人相手の時と、JS自体は書ける人相手のときとか
ロジックどこにおく
- 本当にピュアなロジックならUtil
- componentのutilsとか
- npm_modulesにしちゃうとかも
- でもドメインからむことが多い
- それはReduxの世界へ
- apiからもらったものをreducerで使う時変換したいとき
- selectorってのを使う
- RDBでいうところのビュー
- プロパティ省いたり変換したり
- selectorってのを使う
Reactの読み方(仮) (10min)
- @malloc007
- ryota-murakami
- https://speakerdeck.com/ryotamurakami/10-min-reactdom-codebase-overview
Reactのリポジトリ
- monorepo
- packageの中にいろいろ
Redux のディレクトリ管理を考える (10min)
Reduxのディレクトリ構成悩む
- コントリビューターも悩んでる
論点
- component設計
- store設計
component設計
- container
- reduxと繋ぐ部分
- viewを書くとこではない
- presentational
- viewのみ
- reactのみ
- reduxを意識しないもの
store設計
- rails-style
- domain-style
- ducks
rails-style
domain-style
ducks
- action,reducer同じファイルに入れちゃおうってやつ
まとめ
- actionとreducerを分けて考えるべきではない
中大規模開発をReactで行う現場から伝えたいこと (10min)
- @mki_skt
- https://speakerdeck.com/mukai21/zhong-da-gui-mo-kai-fa-woreactdexing-uxian-chang-karachuan-etaikoto
現場での泥臭い話
- B2B
- 管理画面作ってる
- react + redux
- enzymeでテスト
テスト
- 書かないとのちのち苦しむ
- 何ヶ月も前に作ったものを手動でテストはつらい
- 書くようにするにはどうすればいいか
- TDD
- できるだけ並行でテスト書く
- CIでテスト結果確認できるようにする
- 新規実装時に同時にspecファイルつくるようにする
共通コンポーネントを可視化
- 新しい開発者が同じの作っちゃうとか
- 共通コンポーネントあるか都度聞く聞かれるのも大変
- storybook必須
ドキュメント
- 開発環境のバージョン開発環境の立ち上げ手順
- コーディングガイド
- JSDoc
- 変数名
- テストの書き方
- PRレビューの指針になるようなドキュメントにする
- wikiに書いてたけど１つのリポジトリにした
- 多すぎてそれも見づらくなった
- 今はgitbook使ってる
バージョン変更
- 小刻みにあげること
- 習慣的に行う
- 2週に一度バージョン更新
- nodeはLTSのバージョンが更新された時
- 依存パッケージはlockしておくこと
