Open9
Reactでフロントエンドつくる知見ためていくやつ
なるべく新し目のReactの知見をサクサク見て、概観把握につとめてみる
なるべくTS前提でやっていきたい
$ npx create-react-app hoge-project --template typescript
TSテンプレで始める場合。何も指定しない場合、yarnでinstallが走る様子。
明示的にnpmのみで行きたい場合は --use-npm
を追記
yarnがなきゃ当然npmでやるわけなので、勝手にyarnが入るとかではない
状態管理の方法として
- Redux (大きい場合
- Actionで変更の指示
- Reducer関数に処理をつっこむ
- Storeで状態の保持 (createStoreでstoreの作成
- DispatchでActionをReduxに伝播 (useDispatch
- Reduxからの状態参照 (useSelector
- Context API (小〜中規模
- useReducer (そもそもstore使わない
Redux利用時のstate管理
- re-ducks デザインパターン
- stateディレクトリ内にreducer, selectorなどを分割して配置する方法
トラハックさんの動画がわかりやすかったのでハンズオン見ながら学習すすめてみる
React.VFC が何者か確認中
react v18を見越して、propsにchildrenを明示的に定義するために React.VFC
がいるらしい。
React18以降、childrenが消えたら React.FC
に戻す、が丸そう
とはいえ、書かなくてもよくねぇかという話もあり、型推論にある程度任せてもいいのでは、となっていそう
propsのdestructureってなんだ
// destructureしない
const Hoge = (props) => { return ({props.piyo}) }
// destructureした
const Hoge = ({ piyo }) => { return ({piyo}) }
destructureしないで補完してもらうでいい気がする。props増えたとき再定義面倒そうだし
エンジニア退職したけど、Reactの勉強再開してるのでここに追記していく
useReducerとuseStateの使いかた、使いどころの勉強
少し複雑なStateを管理したいときにuseReducerを用いると心得たtypeなどをつけ、update, delete, pushなどにあわせて動作を変えるといった使い方ができるように
classコンポーネントのときの
- componentDidMount
- componentDidUpdate
- componentWillUnmount
この辺のライフサイクルの話。
useStateにダイレクトに型つけしたいとき
type Hoge = { piyo: string, huga: number };
const [hogeState, setHogeState] = useState<Hoge>();