memo.md

• typescript-fsa,s2s,immutable,recompose などをいれる

使ってみたいもの

React

• React Fragments
• HoC
  • https://postd.cc/react-higher-order-components-in-depth/

TypeScript

• ECMAScript の新し目の機能
  • pipeline operator とか
• readonly
• mapped types
• https://speakerdeck.com/mukai21/typescriptfalsetoransupairutips

テスト

• Jest
  • https://github.com/prettier/prettier-atom
• enzyme
• Redux のテスト
• Storyshots
  • https://qiita.com/takanorip/items/786d8391e2bd99b67561
  • https://qiita.com/terrierscript/items/b36333b3e21328b3de75
• TDD

パフォーマンス

• https://recruit-tech.co.jp/blog/2018/09/19/react_spa_performance_tuning/
• https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/
• https://qiita.com/muraikenta/items/21fad68c184cdc63250e
• https://qiita.com/muraikenta/items/21eb5b2e0d1c7c95e3b8
• shouldComponentUpdate
  • https://hfuji.hatenablog.jp/entry/2017/11/03/183243
  • https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
• https://blog.logrocket.com/make-react-fast-again-part-1-performance-timeline-f7f39f676f58
• アニメーションのパフォーマンス計測
  • https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations
• react-perf-devtool
• react.memo
  • https://reactjs.org/blog/2018/10/23/react-v-16-6.html#reactmemo

TypeScript

• Conditional Types
  • https://qiita.com/Quramy/items/b45711789605ef9f96de
• Nest

アニメーション

• https://qiita.com/nabepon/items/c005a7d4491fd04b453e

非同期処理

• suspense
  • https://qiita.com/fumihiko-hidaka/items/c3aaedd073f7bf5a685f
• redux-saga
• react.lazy
  • https://reactjs.org/blog/2018/10/23/react-v-16-6.html#reactlazy-code-splitting-with-suspense
• suspence
  • https://qiita.com/yoshi_ksk/items/706acf084a7f2c560b26
  • https://logmi.jp/tech/articles/302611

デザイン

• styled-components
  • ThemeProvider
  • StyledFuncton
• Storybook
  • (wix の storybook)[ https://github.com/wix/wix-style-react ]
  • Addon
    • Actions
    • Links
    • Knobs
    • Notes
    • Centered
    • Options
    • Info
    • storyshots
    • addo-viewport
    • https://github.com/storybooks/storybook/tree/master/addons/viewport
    • https://qiita.com/SotaSuzuki/items/b20167ee811aa3bd29df
    • https://www.webprofessional.jp/react-storybook-develop-beautiful-user-interfaces-with-ease/
• grid-layout
  • https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html
  • https://medium.com/@terrierscript/meguro-css-styled-component-css-grid-d8ce0264a89e

デザインパターン

• Clean Architecture
  • https://qiita.com/RikutoYamaguchi/items/7d265c58cb1a37969921#presenter-react
  • https://qiita.com/hirotakan/items/698c1f5773a3cca6193e
• Atomic Design
  • templates ファイルの工夫(qiita のやつ)
• Ducks
• normalizr
• ディレクトリ構成
  • https://hackernoon.com/structuring-projects-and-naming-components-in-react-1261b6e18d76
• DI
  • https://qiita.com/ovrmrw/items/c3ac8d7b4281e95dbec5

開発効率

• reusable components
  • https://blog.bitsrc.io/reusable-components-in-react-a-practical-guide-ec15a81a4d71
• s2s
• redux-actions
• typescript-fsa
  • https://qiita.com/m0a/items/703d64c74e43cb392a64
• typesafe-actions
• react-styleguide
  • https://blog.mitsuruog.info/2018/03/typesctipt-react-styleguidist
• create-components-app
  • CLI からコンポーネント作成
  • https://speakerdeck.com/mukai21/reactfalsekonponentozuo-cheng-woxiao-lu-hua-siyou
  • https://github.com/CVarisco/create-component-app

コード整形

• Prettier
• eslint
  • eslint-plugin-react/prefer-stateless-function

RxJS

• Redux-Observable
  • https://blog.logrocket.com/a-beginners-guide-to-redux-observable-c0381da8ed3a
  • https://speakerdeck.com/nitaking/reactfei-tong-qi-raiburariwozhi-ru?slide=6

その他

• Framer X

  • https://medium.com/@52shinNaka/framer-x%E3%81%AF%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E8%B6%85%E3%81%88%E3%81%A6%E3%81%84%E3%81%8F-56ae8b88ef80

• GraphQL

  • https://developer.kaizenplatform.com/entry/laco/2018-06-08
  • https://qiita.com/102Design/items/9b066251f2f0fe1ae47f
  • https://www.webprofessional.jp/rest-2-0-graphql/
  • https://qiita.com/seya/items/26c8a0dc549a10efcdf8

• react fragments

• Immutable.js

• 絶対パス

• redux-logger

• react-side-effect

• redux-tooltip

• reduxsause

• react-hot-loader

• redux-persist

• react-reconciler

• react-ape

• redux-observable

• Decorators

• redux-pluto

  • https://speakerdeck.com/yosuke_furukawa/redux-pluto-1

• MobX

• react-log-Decorators

• pure-deep-equal

• axios

• parcel

• formik

• Dependabot

  • https://kakakakakku.hatenablog.com/entry/2018/10/12/192502
  • 依存パッケージがアップデートされたら通知してくれるやつ

• context API

  • https://qiita.com/jkr_2255/items/45079573e0691878eb54#%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%B8%E3%81%AEcontext%E9%81%A9%E7%94%A8componentcontexttype

• AMP

• rxjs

• パターンマッチ

  • https://github.com/bramstein/funcy/

• componentDidCatch

  • https://mae.chab.in/archives/60220

Poket keywords

• react
• redux
• typescript
• storybook
• styled-components