入門編に続いて同じ人のステップアップ講座を受ける
前回のメモ
↑のを受けた後UI実装ちょっとした。
コンポーネント作るとかpropsでコンポーネントに値を渡すとかはできたがページ遷移とかがわからない。ステップアップ講座には画面遷移やCSSの当て方があるらしいのでぴったりかも。
ただ、モバイルとPCの切り分けはないのか～そこが一番知りたい；；
CSSを充てる方法
CSSを充てる方法、CssModuleをやっている途中でエラー出て、解決方法わからなくて、その部分消しても何も表示されなくなってあきらめた
というかcodesandboxが前回はできていたコード補完が出なくなった。copilotの機能っぽかったから期間限定だったのか？
いろいろ方法がある
CSSの記法使えたり使えなかったり。
Emotionはいろいろな書き方ができる
styled componentsがおすすめっぽい。
ページ遷移
ページ遷移難しすぎて絶望した。
URLのリンクあるんだ。/page1
react-router-domを使う
<Link to="/Page1">Page1</Link>
javascriptのボタンを押したときの遷移
useHistory
history.push("/page1")
history.goBack();で戻る。ブラウザのバックボタンと同じ
404ページを作るっていうのWebならではって感じ。
ーー
実戦で使ったらuseHistory廃止されてた。
react-router-domのバージョン6では、useHistoryフックは廃止され、代わりにuseNavigateフックが導入されました。
しかもnext.jsの環境ならapp routerを使うべしって言われた。
しかもstorybookだとそもそも画面遷移できなかった。
Atomic Design
デザインチームのほうで出てきて使っていた話がでてきた。Reactのようなのに相性がいい。この単位でコンポーネント作るといい
グローバルstate
コンポーネント分けすぎたら、変数とかflagを渡すときにpropsで渡したらバケツリレーになる。
グローバルで参照できると直接見れる
これも相変わらず難しい・・・
簡単にできるパッケージがfacebookから出ている
でも今は更新されていないらしい。
なんかよくわからないけど、こういう基礎っぽい部分までライブラリに頼るものなのか～
Unityでもそういうのあったのかな・・・
JSONPlaceholder
ダミーデータ API
TypeScript
新規開発なら使わない理由はない。
型を指定できる。
javascriptは察して文字列の数字も計算してしまうが、明示的にnumberを渡したほうがいい
tsconfig.jsonの "strict": true,はちゃんと型を指定しないと怒られる。
自分で配列の中の型を指定しておけば、補完で出てくる
propsの型も指定。必須じゃないものは?をつける
（ChatGPTとかAntDesignのコードにはこういうのがあったのに、今までの講座だとこういうのがなかったのはtypescriptの違いだったのか～）
pickやomitで必要な型だけ選べる
型のコンポーネント
FC！！！！
FCもtypescriptのだったのか・・・ずっと何だろうと思ってた。ファンクラブかよ
FCは暗黙的にchildrenを受け取れる・・・のは17までで、18からは受け取れない
ライブラリの型定義が別途あることがある。.d.tsがあるときはデフォルトで含んでいる
データ取得するとき、エラー判定＆Loading
カスタムフック
関数はuseXXXとする慣習がある
カスタムフックと普通のコンポーネント化の違いが判らない・・・
実践アプリ
レスポンシブだ！！！
chakra ui
childrenのようなタグで囲った中の型はReactNode
cursor:"pointer"
レスポンシブの切り替えはbase:"none", md:"flex";
これはchakraUI独自なのかCSSのあれなのかわからない・・・
チャクラUIはAntDesignと違って塊で使うというより自分で書いていく感じなのか
チャクラUIのボタンはLoading中ようの設定がある。ボタンの中のラベルがくるくるする
Webはブラウザデフォルトのアラートを使えるのいいね
_hover
unsplashがランダムで画像を介してくれるURLがある
https://source.unsplash.com/random
最後に
[かっこの使い分けがわからない]{}<>()目が回る
