create-react-appでTypeScript環境を構築したときにsourcemapを出力しない方法

React TypeScript

Reactのテンプレートを作る方法にcreate-react-appがあります。 github.com これを使うとcreate-react-appコマンドで簡単にテンプレートを作って、初期設定されているnpm scriptsでサーバー起動やビルドといったことが簡単にできるようになっています。 Reac…

2018-02-27

Reactでシングルクリックとダブルクリックを区別して使いたい

React TypeScript

先に今回の話のソースコードです。 github.com Reactではシングルクリックイベントとダブルクリックイベントが用意されています。シングルクリック <a href="javascript:void(0)" onClick={(e) => this.handleOnSingleClick(e)}> Single Click </a> onClickイベントが用意されています。ダブルクリック <a href="javascript:void(0)" onDoubleClick={(e) => th</a>…

2017-10-16

TypeScript2からのReactとnon-null assertion

TypeScript React

TypeScript2からコンパイルオプションの strictNullChecks で、nullability をチェックできるようになった。最近になってこのオプションを有効にしたら意外と修正するところが多かったのでメモ。 TypeScript1系の時は↓の様に書いてました。 import * as Rea…

2017-04-10

TypeScriptでReactを書くときはStateのパラメータに?を付ける

React TypeScript

TypeScriptでReactを書いているとき、Stateに複数パラメータを用意した時に ? を付けてオプションパラメータにします。そうしないと、setState の更新時に全てのパラメータを更新しないといけなくなります。なので、必ず付けろというよりは、パラメータを…

2017-01-09

ReactでのHTML描画について

React

Reactで文字列のHTMLを文字列として描画するのではなく、HTMLで描画する。方法 dangerouslySetInnerHTML を使う。 <span dangerouslySetInnerHTML={{__html: htmlString}}> の様な形で、htmlString にはHTMLが文字列で代入されています。こうすることで、 htmlString の値を文字列としてではなく、HTMLとして表示</span>…