🐾

zennとかQiitaとかの記事まとめサイト開発日記：2日目

2023/03/12に公開

React

TypeScript

frontend

idea

■フロント開発中

Reactでとりあえず、一覧表示できた。
新規追加だな。Todoみたいに1行追加じゃないから、なんかウィンドウ出さなきゃな。
ページ遷移させるライブラリあるけど、、、モーダルウィンドウでやってみよう。

と、その前にhotreloadで手間取ったのでメモ書いとく。
nginxからリバースプロキシでreactコンテナに接続したらhotreload動かなくなった。
どこかのサイトを参考に解決

nginxからリバースプロキシでreactコンテナに接続してhotreload動かす

Reactのコンテナに↓追加

    environment:
        # Fixes bug where websocket connection is fixed to default port 3000
        - WDS_SOCKET_PORT=0

nginxのconfに↓追加

    location /ws {
        proxy_pass http://[Reactのコンテナ名]:[Reactのport];
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

さて、モーダルウィンドウを進めよう。

モーダルウィンドウ

ここ見て作る

TodoAddと↑をマージして動いた。

Modal.setAppElement('#app') // bodyなど任意の要素に変更OK
↓
Modal.setAppElement('#root') // bodyなど任意の要素に変更OK

export const ModalExample: React.FC = () => {
↓
export const TodoAdd = ({ buttonText, ~~省略~~

こんな感じ。あとはフォームを整えれば行けるかな。
ウィンドウ内のスクロールも完璧！！すばらしい。ライブラリがあるっていいね。
ここまで2h

フォームで2hハマった。。。

いろんなサイト見て、フォーム入力→登録ボタン→値を参照までできたけど、何かがちがう。
今回扱おうとしているデータの型的な扱いでなく、単純な配列。すごい違和感。
で、結論。
propsとして定義して、それを用いていくのが正解っぽい。

export typeで定義しているので、いったん見直す必要あり。
今日は、ここでいったん止める。

■本日の成果。

モーダルウィンドウで入力フォーム表示は何とかなりそう。
デバック的な解析は出来た。カンは今までの経験を使えそうな同じ。
データ型的なものの扱い方が間違ってたと気づけた。
そもそも、参考にしたTodoは入力項目が1つなんで、それを参考にしたのが間違いのもと。
気を付けよう。

本日の作業4時間。
次回、3日目。