読者登録したブログ記事をだらだらと巡回していて、こちらの記事を拝見しました。淡々と学んだことをブログに書いていてすごいなと思っていつも読ませてもらっています。 yurufuwa-tech.hatenablog.com 特定のオブジェクトのkeyの値しか許容しない、みたいな…

具体的にはlabelみたいなものですね。Labelというコンポーネントを作って、htmlのlabelと同じように属性値を渡しつつ、独自のスタイルを当てたりするコンポーネントをつくりたいみたいな。 こうする const Label = (props: React.Props<{}> & React.HTMLLabe…

Reactでは継承よりも、HOCを使うのが推奨されている。HOCとはHigher Order Componentの略で、コンポーネントを引数にとってコンポーネントを返す関数のこと。 なので、たとえば似たような前処理をするページコンポーネントが複数あったとして、その共通処理…

SPAを作っていると、何かイベントが起きたときにURL変えつつなにか処理をしたいということがあります。 たとえば絞り込み検索で、クエリストリングだけ書き換えて画面更新したいというケース。具体的には/blog_posts から /blog_posts?tag=1 へ遷移するよう…

Atomic Designの本「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を参考にしながら、こういう感じでやっていってる。 // atoms/AppLayout.tsx const AppLayout = (props: Props) => { const children = React.Children.toArray(props.children) r…

Reduxを使ってウェブアプリケーションの開発をしていて、割と早い段階で、どうしてもReactのsetStateを呼びたい場面に遭遇しました。しかしReduxといえば、Single Source of Truthという原則があります。状態はすべて、Redux側で一つの状態ツリーで管理する…