React Reactでstateが絡まってきたのでuseReducerを使う
useReducerを使う コメント消すツールに置換機能を追加しようと思ったときに、絡み合ったuseStateよりも1つのuseReducerを使った方がいいということに思い至ったので、使い所の参考として使用例を記録しておきます。 コメント...
reactjs
React 
Webサービス コード中のコメントなどを削除するツールを作った
コメントなどを正規表現で削除するツール（Webアプリ)を作った。 どこに ここからアクセスできます: 使い方 左側もしくは上側のテキストエリアに文字列を入力すると、もう片方のテキストエリアに結果が表示されます。 正規表現にマッチした部分を削...
Webサービス github pagesでレポジトリのページの指定に関してメモ
github pagesでcreate-react-appを使ったレポジトリのページを公開する。 基本的には、create-react-appのドキュメント（Deployment | Create React App）の通りです。個人的にわ...
CSS React+CSS 要素の位置を選択して切り替える
reactで要素の位置を選択して切り替える。 ReactとCSSでおこなった。 reactで要素の位置を9個の選択肢から選んで変更できるようにする。選択肢は8方向と中央。 選択肢の提示方法はCSSで調整した。グリッドレイアウトを使用。 要素...
React imgタグの画像を切り替えるとき、アスペクト比を維持しつつリサイズする
1つのimgタグを使って代わる代わる画像を表示するとき、アスペクト比を維持しつつ枠いっぱいに表示する。(Javascript, react) 2021/09追記 リサイズのことを忘れていた。イベントリスナーを追加してリサイズすればいい: /...
React react-springでapiを使う
react-springでspringを再利用する。 react-springの大雑把な理解 react-springのuseSpringはreactのフックを利用しているので、フックの理解が必要になる。react公式（日本語）: フック早...
React react-springまたはreactのカラーコード指定の仕様?に注意する
react-spring?react?のカラーコードの仕様に気を配る 問題 CSSの色指定の文字列がuseSpringの戻り値のSpringValueのtoでの戻り値に含まれていて、かつ、アニメーションが終わった状態で、コンポーネントの再レ...
React create-react-appでのアプリにnode-sassを入れた時のエラー
create-react-appで作成したreactアプリでscssを使おうとしたら、エラーが出たときのメモ 2022/03追記: node-sassでなくsassモジュールを使うべき（後述追記参照） 環境 package.jsonは次の通...
React Reactのサンプルとして連打回数測定器をつくった
Reactサンプル1 Reactの色々な機能などを使ってみようかと思い、サンプルを作ってみることにした。 基本的にできたものはCodePenに置いておこう。 今回は基本的事項の確認として、 stateやpropsでのコンポーネント間の変数の...
React Reactで親から子のコンポーネントにアクセスする
Reactで親コンポーネントから、子コンポーネントにアクセスする。 独立性が下がるが、そうしないと実現できないこともあるので仕方がない。 そもそも独立してないような気もするので問題ないか。小規模だし。 状況 親コンポーネントPでページ全体の...