Open9

Reactでフロントエンドつくる知見ためていくやつ

oratakeoratake

なるべく新し目のReactの知見をサクサク見て、概観把握につとめてみる
なるべくTS前提でやっていきたい

oratakeoratake

$ npx create-react-app hoge-project --template typescript
TSテンプレで始める場合。何も指定しない場合、yarnでinstallが走る様子。
明示的にnpmのみで行きたい場合は --use-npm を追記
yarnがなきゃ当然npmでやるわけなので、勝手にyarnが入るとかではない

oratakeoratake

状態管理の方法として

  • Redux (大きい場合
    • Actionで変更の指示
    • Reducer関数に処理をつっこむ
    • Storeで状態の保持 (createStoreでstoreの作成
    • DispatchでActionをReduxに伝播 (useDispatch
    • Reduxからの状態参照 (useSelector
  • Context API (小〜中規模
  • useReducer (そもそもstore使わない

Redux利用時のstate管理

  • re-ducks デザインパターン
    • stateディレクトリ内にreducer, selectorなどを分割して配置する方法
oratakeoratake

React.VFC が何者か確認中

react v18を見越して、propsにchildrenを明示的に定義するために React.VFC がいるらしい。
React18以降、childrenが消えたら React.FC に戻す、が丸そう

とはいえ、書かなくてもよくねぇかという話もあり、型推論にある程度任せてもいいのでは、となっていそう

oratakeoratake

propsのdestructureってなんだ

// destructureしない
const Hoge = (props) => { return ({props.piyo}) }
// destructureした
const Hoge = ({ piyo }) => { return ({piyo}) }

destructureしないで補完してもらうでいい気がする。props増えたとき再定義面倒そうだし

oratakeoratake

エンジニア退職したけど、Reactの勉強再開してるのでここに追記していく

useReducerとuseStateの使いかた、使いどころの勉強
https://reffect.co.jp/react/react-hook-reducer-understanding
少し複雑なStateを管理したいときにuseReducerを用いると心得た

typeなどをつけ、update, delete, pushなどにあわせて動作を変えるといった使い方ができるように

oratakeoratake

useStateにダイレクトに型つけしたいとき

type Hoge = { piyo: string, huga: number };
const [hogeState, setHogeState] = useState<Hoge>();