React

Meta(旧Facebook)の開発したユーザインタフェース構築のためのJavaScriptライブラリ
シングルページアプリケーション(SAP)を作る．

useEffectで第2引数を空行列[]にして，初回時のみレンダリングのときに遭遇した症状．
初回レンダリング時の使われるstate(useState定義の第1引数,コンポーネント)は初回時の値で独立し，その後stateを更新してもコールバック関数内のstateには反映されない模様．
コールバック関数内部で反映させたかったらstateじゃなくてuseRefを使うと良い．
useEffect内のsetIntervalでstateを更新できない問題
[React] useEffect内のコールバック関数でstateが更新されない問題

なんでかわからんがMacだとコンパイル失敗した、Reactもnpmでインストールしてるはずなんだけど。まぁこれで動いたのでヨシとした。
Error : 'React' must be in scope when using JSX react/react-in-jsx-scope　　

'React' must be in scope when using JSX react/react-in-jsx-scope?

Chart.jsのプラグインchartjs-plugin-streaming リアルタイムストリーミングデータ向け Chart.js プラグインを使う．
関連ライブラリの更新により2022年6月29日時点ではそのままコードをコピペしても動かない．

Node.jsをインストールしてあり，npm,npxが動作する前提
create-react-appでひな形を作る

npx create-react-app chartjs-plugin-streaming_react

関連モジュールをインストールする．

npm install chart.js react-chartjs-2 luxon chartjs-adapter-luxon chartjs-plugin-streaming --save

チュートリアル上ではChartコンポーネントもreact-chartsjs-2からインポートして登録しているが，これで実行するとブラウザのデバッグ画面に以下のエラーが出る
Uncaught TypeError: react_chartjs_2__WEBPACK_IMPORTED_MODULE_5__.Chart.register is not a function
Chartはchart.jsからインポートする．
Chart.register is not a function

import { Chart} from 'chart.js';

これだけではまだ駄目で，次はError: “linear” is not a registered scale.が大量に出る．
core.js:6241 ERROR Error: "linear" is not a registered scale. #4
このissueの中で解決策が示されているので，これに従ってChartのインポート部分の処理を少し変更する．
Chart.js公式ドキュメントにも書いてある…
Bundlers (Webpack, Rollup, etc.) - Integration - Chart.js

// インポート時にregisterablesも取り込む
import { Chart, registerables } from 'chart.js';
 
// インポート後，この処理を追記する
Chart.register(...registerables);

https://mui.com/
Material-ui
Reactで人気のUIライブラリ，これ使うと割りと最近（2022年）段階のUI作れる．コミュニティ版はMITライセンスあり

https://lucide.dev/