[メモ] Webアプリ開発で学ぶRust言語入門 5章

5.1 フロントエンド開発

ここは目下業務で React 書きまくってるので余裕やろ（フラグ
React + TypeScript って良いよね💌

5.2 React 環境構築

vite 名前は知ってたけど使ったことなかった。
あと、Vue の作者が作ったやつだったのか😃

Vite を使った開発環境構築

なんか微妙に選択肢が違ったけど内容的には一緒だろう。

npm create vite
Need to install the following packages:
  create-vite
Ok to proceed? (y) y
✔ Project name: … todo-front
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/kakeru/vscodeProjects/rust_web/todo-front...

Done. Now run:

  cd todo-front
  npm install
  npm run dev

あと pnpm 気になってたから npm の代わりに使ってみる。

React Component の更新と hooks

count + 1 するところなぜか関数呼び出し（setCount((count) => count + 1)）になってたけど、
setCount(count + 1) でももちろんいけた。

5.3 Todo アプリの UI 実装

reset.css の導入

ほぇ〜、reset.css てパッケージ用意されてたのか。
後関係ないけど pnpm 爆速😆

React UI Tools, MUI

っぱ楽にUI構築したいならライブラリよね。
あと pnpm でとりあえず最新Verのパッケージインスコしたら Warning 出たけど、
今のところ普通に起動できてるからOK。

 WARN  Issues with peer dependencies found
.
├─┬ @emotion/react 11.10.4
│ ├── ✕ missing peer @babel/core@^7.0.0
│ └─┬ @emotion/babel-plugin 11.10.2
│   ├── ✕ missing peer @babel/core@^7.0.0
│   └─┬ @babel/plugin-syntax-jsx 7.18.6
│     └── ✕ missing peer @babel/core@^7.0.0-0
└─┬ @emotion/styled 11.10.4
  └── ✕ missing peer @babel/core@^7.0.0
Peer dependencies that should be installed:
  @babel/core@">=7.0.0 <8.0.0"

• TodoForm コンポーネント

誤字

• type Prosp = {

  • type Props = {

• 画面遷移

あら？サンプルと違って、画面表示したら add todo ボタンが中央表示になっちゃうな。。。まあ途中経過だし良いか

5.4 外部API との通信（1）

Todo を API 経由で保存する

• CORS

この時点最新（0.3.4）の tower-http 入れたら、
.allow_origin(Origin::exact(~))のところの Originがないよって怒られたけど、
AllowOrigin てのがあったのでそれ使ったらいけた。クラス名変わってたってことね。

API から登録済みの Todo を取得する

誤字

• 「ADD TODO」押下時の onSumimit では、
  • 「ADD TODO」押下時の onSubmit では、

5.5 外部 API との通信（2）

FE周りはすんなりｂ

Todo の更新

• TodoItem に edit を追加

誤字

-  const [eidtText, setEditText] = useState('')
+  const [editText, setEditText] = useState('')