Open12
reactとtypescriptでtodoアプリを作るメモ
minmegこの動画やってみよう
minmeg公式にcreate-react-appが載っていない
これは…？
minmegcreate-react-appはメンテナがいなくて更新止まったのか…
Viteでいくぞ
Vite にはNode.jsバージョン 18 以降が必要です。
node --version
v18.12.1
npm create vite@latest RTtodo -- --template react-ts
✔ Package name: … rttodo
Scaffolding project in /Users/minmeg/workspace/RT-todo/RTtodo...
Done. Now run:
cd RTtodo
npm install
npm run dev
Viteさんの指示に従ってみる
npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@typescript-eslint/eslint-plugin@7.3.1',
npm WARN EBADENGINE required: { node: '^18.18.0 || >=20.0.0' },
npm WARN EBADENGINE current: { node: 'v18.12.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@typescript-eslint/parser@7.3.1',
npm WARN EBADENGINE required: { node: '^18.18.0 || >=20.0.0' },
npm WARN EBADENGINE current: { node: 'v18.12.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@typescript-eslint/scope-manager@7.3.1',
npm WARN EBADENGINE required: { node: '^18.18.0 || >=20.0.0' },
npm WARN EBADENGINE current: { node: 'v18.12.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@typescript-eslint/type-utils@7.3.1',
npm WARN EBADENGINE required: { node: '^18.18.0 || >=20.0.0' },
npm WARN EBADENGINE current: { node: 'v18.12.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@typescript-eslint/utils@7.3.1',
npm WARN EBADENGINE required: { node: '^18.18.0 || >=20.0.0' },
npm WARN EBADENGINE current: { node: 'v18.12.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@typescript-eslint/visitor-keys@7.3.1',
npm WARN EBADENGINE required: { node: '^18.18.0 || >=20.0.0' },
npm WARN EBADENGINE current: { node: 'v18.12.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@typescript-eslint/types@7.3.1',
npm WARN EBADENGINE required: { node: '^18.18.0 || >=20.0.0' },
npm WARN EBADENGINE current: { node: 'v18.12.1', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@typescript-eslint/typescript-estree@7.3.1',
npm WARN EBADENGINE required: { node: '^18.18.0 || >=20.0.0' },
npm WARN EBADENGINE current: { node: 'v18.12.1', npm: '8.19.2' }
npm WARN EBADENGINE }
いっぱい怒られている
nodeのバージョンを上げんといかんそう
minmegバージョン管理ツールって結局何が正解なんだろうね…？
nとかnvmとか？
asdfとかaquaとか？
いったん普通にupdateしちゃおう
node -v
v20.11.1
普通に行けたや、再チャレンジ
minmegnpm install
up to date, audited 220 packages in 913ms
41 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
すっといけた&npm run devも動いたぞ
minmeg頻出するtypescriptの型説明のDoc、内容がまとまっててとてもいいな〜
TypeScriptのinterfaceとtypeの違い 型エイリアスの方が拡張性が少なそうで安全に倒せそうなので、悩んだら型エイリアスで良さそうだな
React.StrictModeについて。地味にこの辺はあんまり知らなかったな
この辺りは自分でメモしよう
minmegconstとfunctionどっちで定義するのがいいのか
→巻き上げが必要がどうかで決める
ただ可読性考えると巻き上げすると混乱するから、基本constでいい気がする
minmegreact-beautiful-dndが動画では出ているけど、Node20で動くかわからないなあ
dnd-kitっていうやつ使ってみようかな
minmegreact-dndっていうのはまた今度かなあ
minmegシンプルなのはtrue, falseの2軸でいける