クライアントサイドで完結する簡単な React アプリケーションなら create-react-app も Parcel もいらなくて、Deno だけでいける。 Deno なら（ほぼ）設定不要で TypeScript が書けて、型チェックが効き、バンドラーにもなる。 Deno の強みは何と言っても ou…

前に書いた記事 Context と Hooks でグローバルな状態を管理する一番シンプルな方法 - 藤 遥のブログ を発展させた。 やりたいことは以下。 Redux を使わずに React だけでグローバルな状態を管理したい 状態は関心事に空間分けしたい TypeScript を使うが型…

Redux を使わずに React だけでグローバルな状態を管理したい Context API はやや複雑なのでシンプルにしたい グローバルな状態は末端のコンポーネントでも更新できるようにしたい これらを満たすには、 Context API と Hooks API を組み合わせる。シンプル…

React 16.8 から追加された Hooks API の useEffect() 。 Hooks API Reference – React useEffect() のコールバックに async 関数を与えたくなるけど、それは禁止されている。TypeScript で書いているとわかるが、useEffect() のコールバックに与える関数の…

Clean Architecture と React を組み合わせるデモアプリが eduardomoroni/react-clean-architecture というリポジトリにあったので、コードを覗いたら勉強になった。 Clean Architecture を大づかみに理解する よく出てくる図。 私の理解している限りでは、 …

HOC（高階関数）は便利なんだけど、型と一緒に使おうとするとどうもうまくいかなくて、試行錯誤の結果やっと最小構成の例が作れたので書いておく。まあジェネリクスの練習ですね。これでそこそこの規模のものを作ろうとしたら消耗する予感しかしない。 Examp…

何をしたか React で HOC (Higher Order Component) が肥大化するとレンダリングのコストが増大するはずだと思って調べた。 もっと詳しく HOC は要するに高階関数であり、高階関数はロジックを抽象化するために優れたデザインパターンだが、パフォーマンス面…

n番煎じだけど気にしない。完成品。 React Markdown Editor Github 1. create-react-appでひな型を作る create-react-appを使う。 $ yarn global add create-react-app $ create-react-app react-markdown-editor 待つこと数十秒。yarn が速いので助かる。 2…

React でパフォーマンスが気になった時にレンダリングの時間をどうやって計測するんだろうと思ったら、公式にあった。 Performance tools react-addons-perf というツールで計測できる。 以下、簡単なサンプルコード。 import React, { Component } from 're…

React.js のテストをさくっと書きたい。とりあえず、 jsdom とか本格的なことはしたくない。最低限、コンポーネントがエラーを吐かずにレンダリングされることぐらいはテストしたい。そこで Mocha + Enzyme を使う。 Mocha Enzyme 必要なことは Enzyme の RE…