React

PC

React:Cytoscape.js を試した

前回に引き続き、ライブラリを物色しています。 環境 yarn create react-app my-app --template typescript cd my-app yarn add cytoscape yarn a...
PC

React:maxGraph を試した

構成図や階層図に使えそうなライブラリを物色しています。現状、React でこの手のグラフを描画するライブラリの多くは相性が良くないと感じています。 maxGraph を試した結果を残しますが、やはり React と相性が良くなさそう...
PC

Redux Toolkit の RTK Query を定周期に実行する

以前 RTK Query を使ってみましたが、定周期で実行することができるようなので試しました。 テンプレートの作成 create-react-app でテンプレートを作成します。create-react-app のバージョン...
PC

ローカルで実行した React アプリでもサーバーの API を利用するには

結果、package.json に以下の様な proxy を設定すれば OK という話なのですが、やりたいことから順に説明していきます。 "proxy": " API のポートが 80 で無く...
PC

React + Redux Toolkit + Storybook のプロジェクトを作成する

作成した React コンポーネントの確認に、Storybook が便利です。更に、Redux Toolkit を導入している場合はどうするか、を確認してみました。 Redux Toolkit のプロジェクトを作成する 公式で...
PC

React で長い文字列を省略表記にして、ツールチップに全て表示するには

どんなことをしたいかというと、 文字列が長くて表示しきれないときは省略表記するマウスホバーで文字列全体をツールチップ表示する というコンポーネントを作成してみます。動作は Chrome バージョン 92.0...
PC

Redux Toolkit の RTK Query で REST API を使う

前回は createAsyncThunk を使いましたが、チュートリアルを読み進んでみると、元々データフェッチの機能が用意されていましたので、今回はそちらの方法で REST API を使ってみました。create-react-app でテ...
PC

React + Redux Toolkit で REST API を使う

React Redux で面倒に感じる部分が、かなり良い感じに改善しているらしい Redux Toolkit 。非同期の部分も加わっている様なので、REST API を試してみました。 基本はテンプレートを使用 Redux T...
PC

propsの型で楽する

props の型を定義するとき、 組み込み要素の props を引き継ぐ不適切な props 値を設定できないようにする 際に参考になりそうな事を記載します。 組み込み要素の props を自身のコンポーネントに加える ...
タイトルとURLをコピーしました