ウィンドウリサイズイベントで変更されたウィンドウの幅を取得するhooksのメモ リサイズしたとき無駄に発火しないように setTimeout() を入れています。 // useWindowWidth.ts import { useCallback, useLayoutEffect, useState } from "react"; /** * resiz…

こちらを参考に触ってみました。 qiita.com ｽｺﾞｲ①: 導入がかんたん ↓だけでどういうものか確認できる。 npm i -g vue-cli vue init nuxt/starter nuxt-starter cd nuxt-starter npm i npm run dev #=> http://localhost:3000 ｽｺﾞｲ②: チルダ ~ がドキュメント…

Reactアプリでリリースってなったとき、みんなやりたいのがjsファイルのminify。 webpackのドキュメント list of plugins に習い、webpack.config.jsで plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] を追加するも…

よくわからないままはじめ、まさに習うより慣れよで身につけつつある Reduxスキル。 最初のほうに作ったソースを見直すと、ある共通点に気がつきました。 無駄なstateが多い！ propsで受け取った値をわざわざコピーしてstateで保持してたりします。 変更され…

こういうやつが欲しい。 そこで <Info message={message} /> こういうコンポーネントを作成したところ、messageに与えた文字列のhtmlタグがエスケープされて、そのまま出力されてしまう。 <Info message="Hello,<br/><br/><strong>world!!!!!!</strong>" /> // => Tooltipに「Hello,<br/><br/><strong>world!!!!!!</strong>」 それで、同じ壁にぶち当たってる人を探したら、いた。 s</br/></br/></info></info>…

componentDidMount() { $.get('/data/hoge.json', function (result) { this.setState({ hogeList: result }); }.bind(this)); } 上記を定義したReactコンポーネントをESLintでテストすると怒られた。 error "$" is not defined no-undef これは .eslintrcの…

はまったのでメモ 以下のようなpropsとstateを持つコンポーネント static propTypes = { onChange: PropTypes.func.isRequired, // this.state.selectedItemListが変更されたときに発火 itemList: PropTypes.array.isRequired, // DBからとってきたマスター…