ReactReactでstateが絡まってきたのでuseReducerを使う useReducerを使う コメント消すツールに置換機能を追加しようと思ったときに、絡み合ったuseStateよりも1つのuseReducerを使った方がいいということに思い至ったので、使い所の参考として使用例を記録しておきます。 コメント...2022.03.22React
Reactimgタグの画像を切り替えるとき、アスペクト比を維持しつつリサイズする 1つのimgタグを使って代わる代わる画像を表示するとき、アスペクト比を維持しつつ枠いっぱいに表示する。(Javascript, react) 2021/09追記 リサイズのことを忘れていた。イベントリスナーを追加してリサイズすればいい: /...2021.09.03React
Reactreact-springでapiを使う react-springでspringを再利用する。 react-springの大雑把な理解 react-springのuseSpringはreactのフックを利用しているので、フックの理解が必要になる。react公式(日本語): フック早...2021.07.12React
Reactreact-springまたはreactのカラーコード指定の仕様?に注意する react-spring?react?のカラーコードの仕様に気を配る 問題 CSSの色指定の文字列がuseSpringの戻り値のSpringValueのtoでの戻り値に含まれていて、かつ、アニメーションが終わった状態で、コンポーネントの再レ...2021.07.02React
Reactcreate-react-appでのアプリにnode-sassを入れた時のエラー create-react-appで作成したreactアプリでscssを使おうとしたら、エラーが出たときのメモ 2022/03追記: node-sassでなくsassモジュールを使うべき(後述追記参照) 環境 package.jsonは次の通...2021.06.28React
ReactReactのサンプルとして連打回数測定器をつくった Reactサンプル1 Reactの色々な機能などを使ってみようかと思い、サンプルを作ってみることにした。 基本的にできたものはCodePenに置いておこう。 今回は基本的事項の確認として、 stateやpropsでのコンポーネント間の変数の...2020.12.01React
ReactReactで親から子のコンポーネントにアクセスする Reactで親コンポーネントから、子コンポーネントにアクセスする。 独立性が下がるが、そうしないと実現できないこともあるので仕方がない。 そもそも独立してないような気もするので問題ないか。小規模だし。 状況 親コンポーネントPでページ全体の...2019.09.01React
ReactReactでsetInterval使用で定期描画する reactでsetIntervalを使って定期的な描画を行う。 調べたところ、コンポーネントをクラスで定義するか関数で定義するかで方法が異なるようだ。 クラス定義の場合 メソッドとして、componentDidMount()とcompone...2019.07.22React