コメント追加するUIをAnt designを用いて作成。 ant.design create-react-appでのAnt designの導入 create-react-appの設定をオーバーライドする必要がある。 ant.design eslintの設定 Standardを用いた。 github.com Codesandbox

例えば、複数のコンポーネント間で同じファンクションやロジックを使用している場合、繰り返しが発生していることになりDRYではない。そんなときに使えるのがHigher Order Components (HOC)である。 実はVanillaJSにもHigher Order Functionsが存在していて…

今までPropTypesやTypeScriptによる静的型付けを述べてきたが、今回はFlowを用いた実装をしてみる。 flow.org 次のようなディレクトリ構造で、5つ星評価のUI実装を考える。 . ├── Stars.css └── Stars.js インストール インストール方法は公式ドキュメントに…

Reactでは、状態管理がDOMではなくReact componentで行われる。 Reactなしである場合、例えばformのinput要素の状態を取ってくる場合は従来はDOM操作によって取ってくるという手法だった。 ではどちらの方法がベターであるのか？ この質問に付随して出てくる…

JavaScriptにはBoolean, Null, Undefined, Number, String, Symbol, Objectの7種類のデータ・タイプが存在する。 それらの型をハンドリングする際にFlowとかTypeScriptなどのツールが導入されているわけだが、Reactのプロジェクトでそこまで導入するのが面倒…

new binding /** * new Binding */ const Animal = function(color, name, type) { this.color = color this.name = name this.type = type } const zebra = new Animal('black and white', 'shimauma', 'plant-eating animal') console.log(zebra) 下記のよ…

Implicit binding 次のようなファクトリーファンクションがあるとする。 いわゆる実行時にオブジェクトを返却するファンクション。 /** * Implicit Binding * Left of the dot at call time */ const Person = function(name, age) { return { name, age, sa…