<code>React.Fragment</code>要素を使うとどうしてもネストしなければ表現できないような構造時にラップする要素として使えます。この要素は何も HTML 要素を生み出しません。この要素は要素として特別に扱われ、<code>&lt;&gt;</code>と<code>&lt;/&gt;</code>で囲む方法が許されてます。<pre><code class=language-jsx>&lt;&gt;
 &lt;div&gt;contents1&lt;/div&gt;
 &lt;div&gt;contents2&lt;/div&gt;
&lt;/&gt;
</code></pre>このコードは実際には以下のような結果となります。<pre><code class=language-jsx>&lt;div&gt;contents1&lt;/div&gt;
&lt;div&gt;contents2&lt;/div&gt;
</code></pre><div class=n-md_h3-box><a href=#空の要素_React.Fragment+属性を渡したい aria-label=属性を渡したいのアンカー class=n-md_h3-anchor></a><h3 id=空の要素_React.Fragment+属性を渡したい class=n-md_h3-heading>属性を渡したい</h3></div>ただ<code>&lt;&gt;&lt;/&gt;</code>では属性を渡すことはできません。例えば代表的なものに<code>key</code>属性があります。その場合は普通に<code>React.Fragment</code>を要素として使います。<pre><code class=language-jsx>{[...Array(5)].map((_, i) =&gt; {
 return (
 &lt;React.Fragment key= {i}&gt;
 &lt;div&gt;contents1&lt;/div&gt;
 &lt;div&gt;contents2&lt;/div&gt;
 &lt;/React.Fragment&gt;
 );
})}
</code></pre>

空の要素 React.Fragment

JSX で HTML のように属性値を渡すと<code>key</code>や<code>ref</code>（React が扱う値）以外は<code>props</code>として子コンポーネントに渡せます。<a href="https://codesandbox.io/s/reverent-khorana-rigyz?fontsize=14&amp;hidenavigation=1&amp;theme=dark">例</a>です。<pre><code class=language-jsx>const Child = props =&gt; {
 return &lt;p&gt;{props.text || "default text"}&lt;/p&gt;;
};

const App = () =&gt; {
 return (
 &lt;div className="App"&gt;
 &lt;Child text="props text" /&gt;
 &lt;Child /&gt;
 &lt;/div&gt;
 );
};
</code></pre><code>Child</code>は<code>text</code>属性を使っているので、親が使うときに<code>text</code>属性を置いてあげるとその値を使うことができます。ですが、この値はが必ず渡されるという保証はありません。 予期しない動作にならないように、子ではフォールバック値が使われるように<code>|| &quot;default text&quot;</code>のように設定しておくと安心です。

親から子へ値を渡す: props

公式ドキュメントには、「頭に小文字を使うと HTML かと思うので、大文字で定義してください」というようなことが<a href=https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized>この辺</a>に書かれていますが、少し分からないケースがでてきたので自分でもトランスパイルしてみて調べました。<div class=n-md_h3-box><a href=#JSX_のタグ名にはどんなものが使えるかまとめ+変数 aria-label=変数のアンカー class=n-md_h3-anchor></a><h3 id=JSX_のタグ名にはどんなものが使えるかまとめ+変数 class=n-md_h3-heading>変数</h3></div>この辺はドキュメントの通り頭小文字で定義した場合は単に文字列として渡されていました。<pre><code class=language-jsx>const orange = () =&gt; &lt;div style={{padding:10,background:'orange'}} /&gt;;
const Orange = () =&gt; &lt;div style={{padding:10,background:'orange'}} /&gt;;</code></pre>展開後。<pre><code class=language-js>React.createElement('orange', {
 style: {padding: 10, background: 'orange'}
});
React.createElement(Orange, {
 style: {padding: 10, background: 'orange'}
});</code></pre><div class=n-md_h3-box><a href=#JSX_のタグ名にはどんなものが使えるかまとめ+オブジェクト aria-label=オブジェクトのアンカー class=n-md_h3-anchor></a><h3 id=JSX_のタグ名にはどんなものが使えるかまとめ+オブジェクト class=n-md_h3-heading>オブジェクト</h3></div><h4 id=プロパティアクセス>プロパティアクセス</h4>ここが良く分からなかった部分です。 オブジェクトの場合は、大文字小文字関係なく React コンポーネントとして渡されます。<pre><code class=language-jsx>const div = {}
div.orange = () =&gt; &lt;div style={{padding:10,background:'orange'}} /&gt;;
div.Orange = () =&gt; &lt;div style={{padding:10,background:'orange'}} /&gt;;</code></pre>展開後。<pre><code class=language-js>React.createElement(div.oarnge, {
 style: {padding: 10, background: 'orange'}
});
React.createElement(div.Orange, {
 style: {padding: 10, background: 'orange'}
});</code></pre>ちなみにこの場合に<code>div</code>を使っても React はそれを単に HTML タグと考えらるので問題ないです。<pre><code class=language-jsx>// 上の続き
&lt;div /&gt;

// は
React.createElement('div', null);</code></pre><h4 id=インデックス記法でのアクセス>インデックス記法でのアクセス</h4>これもまぁドキュメントに書かれているのですが、<code>div[&#39;orange&#39;]</code>というような形を JSX のタグで使うことはできません。その場合は事前に<code>Orange</code>のような変数にその値を格納してから<code>&lt;Orange /&gt;</code>のように使う必要があります。

JSX のタグ名にはどんなものが使えるかまとめ

コンポーネント内部の状態を持つ為に使います。この関数は初期値を引数として渡せ、現在値と更新用の関数を返します。以下は例です。<pre><code class=language-js>const [hidden, setHidden] = useState(false);
</code></pre><code>hidden</code>値と<code>setHidden</code>関数を得ます。単にこれは分割代入なので名前は適当に決めます。定義した直後<code>hidden</code>は引数として渡した<code>false</code>が入ります。この値を<code>true</code>にするには<code>setHidden</code>関数に次の値を渡して実行します。<pre><code class=language-js>setHidden(true);
</code></pre>更新用の関数は、引数に関数を取ることもできます。引数の関数には現在値が渡されて実行され、戻り値が次の現在値になります。なので、以下のようにも書けます。<pre><code class=language-js>setHidden(state =&gt; !state)
</code></pre>値を更新すると、コンポーネントの状態を更新したという事になるので、このフックを持つコンポーネントは再描画されます。

React Hooks ∋ useState

コンポーネントを <a href=https://facebook.github.io/flux/docs/in-depth-overview#structure-and-data-flow>Flux フロ</a>で管理したいなら<code>useState</code>の代わりに使うのがいいかもしれません。特に管理する状態が多い場合はこちらを使うと処理を外部に切り分けられコードが見やすくなるのでお勧めします。このフックは2-3の引数を受け取ります。1つ目は Reducer、2つ目はその Reducer の初期値、3つ目はオプショナルで2つ目の初期値が複雑な場合、それを更に弄る為の関数です。このフックは戻り位置に状態<code>state</code>と<code>dispatch</code>という Reducer へアクションを流すための関数を返します。<a href="https://codesandbox.io/s/usereducer-4tbyg?fontsize=14&amp;hidenavigation=1&amp;theme=dark">例</a>です。<pre><code class=language-jsx>const init = initialState =&gt; {
 initialState.count = Math.floor(Math.random() * 10);

 return initialState;
};

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

const initialCountState = { count: 0 };

const countReducer = (state, action) =&gt; {
 switch (action.type) {
 case INCREMENT: {
 const nextState = { ...state };
 nextState.count++;
 return nextState;
 }

 case DECREMENT: {
 const nextState = { ...state };
 nextState.count--;
 return nextState;
 }

 default: {
 return state;
 }
 }
};

const App = () =&gt; {
 const [state, dispatch] = useReducer(countReducer, initialCountState, init);

 const increment = useCallback(() =&gt; {
 dispatch({
 type: INCREMENT
 });
 }, [dispatch]);

 const decrement = useCallback(() =&gt; {
 dispatch({
 type: DECREMENT
 });
 }, [dispatch]);

 return (
 &lt;div className="App"&gt;
 &lt;span&gt;{state.count}&lt;/span&gt;
 &lt;button onClick={increment}&gt;increment&lt;/button&gt;
 &lt;button onClick={decrement}&gt;decrement&lt;/button&gt;
 &lt;/div&gt;
 );
};
</code></pre><code>useReducer</code>には上記の説明のように（ここでは無理やり）3つの引数を渡してます。<code>initialState</code>では<code>count</code>は<code>0</code>としてますが、<code>init</code>関数により<code>0</code>から<code>9</code>のどれかに書き換えられます。アクションを発行する関数は<code>useCallback</code>で囲みます。この Reducer を使った更新では<code>dispatch</code>関数は毎回変更が入ってしまい毎回アクション関数を新しく作ることになってしまいますが、依存しない<code>props</code>の更新が来た時などにはそれを防げる為です。今回は<code>props</code>がありませんが、そういった場合でも癖として常にやっておいたほうがいいかなと思います。<code>&lt;button&gt;</code>をクリックすると<code>countReducer</code>へアクションが飛びます。<code>countReducer</code>ではそのアクションの<code>type</code>を見て捌きます。<code>switch</code>構文で捌くことが多いですが、<code>if</code>構文などでも構いません。そして<code>countReducer</code>の戻り値が次の<code>useReducer</code>の戻り値の<code>state</code>へやってきます。そして、その値でコンポーネントが再描画される…という動作を繰り返します。

React Hooks ∋ useCallback

React Hooks ∋ useReducer

条件が同じ時に同じ関数を返すことができる関数です。1つ目の引数にある条件の時の関数、2つ目の引数に条件を渡します。戻り値もまた関数でその引数や戻り値は1つ目の引数に渡した関数と同じになります。以下は例です。<pre><code class=language-js>const fn = useCallback(
 () =&gt; {
 console.log('called with: ', foo, bar, baz);
 },
 [foo, bar, baz]
);
</code></pre>まず前提として JavaScript では<code>(() =&gt; {}) !== (() =&gt; {})</code>です。これは参照先が違う為です。上記コードの<code>fn</code>は<code>foo</code>と<code>bar</code>と<code>baz</code>に依存してます。例えば<ol><li><code>foo === 1</code></li><li><code>bar === 2</code></li><li><code>baz === 3</code></li></ol>の時、関数は<code>&#39;called with: 1 2 3&#39;</code>表示する関数を返します。さて、このような動作の関数は何個も必要なのか。やってることは同じなので1つ<code>&#39;called with: 1 2 3&#39;</code>表示する関数を作れば十分なはずです。それを1つにしちゃうのが<code>useCallback</code>です。つまり、<code>useCallback</code>がやっているのは<code>foo</code>と<code>bar</code>、<code>baz</code>がセットで同じ場合、前回作った関数があればそれを使うという事をするフックという事になります。<div class=n-md_h3-box><a href=#React_Hooks_∋_useCallback+依存無しの関数 aria-label=依存無しの関数のアンカー class=n-md_h3-anchor></a><h3 id=React_Hooks_∋_useCallback+依存無しの関数 class=n-md_h3-heading>依存無しの関数</h3></div>もし関数の内部が外部のどんな変数にも依存してない場合、明らかに生成が必要な関数は1つになります。明らかに1つの時は条件に空配列を置きます。<pre><code class=language-js>useCallback(
 () =&gt; { /* ... */ },
 []
);
</code></pre>これで常に最初に渡した<code>() =&gt; { /* ... */ }</code>が返ります。依存無しなのにわざわざ<code>useCallback</code>を使う必要があるのかとも思うかもしれません。これは必要あります。でなければ、子コンポーネントに渡すときに違う参照の関数を渡すことになり、子コンポーネントから見れば毎回違うセットの<code>props</code>が渡ってくるように見える為です。

ほぼ<code>useCallback</code>と同じ役割です。主に参照を返すような値をいくつも作らないようにする為に使います。<code>useMemo</code>には1つ目の引数に好きな値、2つ目には<code>useCallback</code>などと同じ用に条件を渡します。この条件がセットで同じ値の時は前回返した値を返します。以下は例です。<pre><code class=language-js>const obj = useMemo(
 {foo, bar, baz},
 [foo, bar, baz]
);
</code></pre>例えば、<ol><li><code>foo === 1</code></li><li><code>bar === 2</code></li><li><code>baz === 3</code></li></ol>な時<code>obj</code>は<code>{foo: 1, bar: 2, baz: 3}</code>というオブジェクトを返します。次に同じ条件のセットで再度実行されると<code>obj</code>前回返した<code>{foo: 1, bar: 2, baz: 3}</code>をそのまま返します。もし違う条件のセットであれば新しいオブジェクトを作って返します。<div class=n-md_h3-box><a href=#React_Hooks_∋_useMemo+依存無しの値 aria-label=依存無しの値のアンカー class=n-md_h3-anchor></a><h3 id=React_Hooks_∋_useMemo+依存無しの値 class=n-md_h3-heading>依存無しの値</h3></div>もし値が外部のどんな変数にも依存してない場合、明らかに生成が必要な値は1つになります。明らかに1つの時は条件に空配列を置きます。<pre><code class=language-js>useMemo(
 { /* ... */ },
 []
);
</code></pre>これで常に<code>{ /* ... */ } === { /* ... */ }</code>な値が返ります。依存無しなのにわざわざ<code>useMemo</code>を使う必要があるのかとも思うかもしれません。これは必要あります。でなければ、子コンポーネントに渡すときに違う参照の値を渡すことになり、子コンポーネントから見れば毎回違うセットの<code>props</code>が渡ってくるように見える為です。

React Hooks ∋ useEffect

React Hooks ∋ useMemo

コンポーネントのライフサイクル時に処理を行うために使います。ライフサイクルとはコンポーネントが、<ol><li>レンダリングされた時</li><li>リレンダリング（更新）された時</li><li>削除される時</li></ol>です。<code>useEffect</code>は引数に2つの値を渡します。1つ目は上記のライフサイクル処理を行う関数、2つ目はライフサイクル時に関数を発火するかどうかの依存条件を<code>useCallback</code>らと同じように渡します。戻り値はありません。以下は例です。<pre><code class=language-js>const [foo] = useState('');

useEffect(
 () =&gt; {
 console.log(foo);
 }, [foo]
);
</code></pre><code>useEffect</code>はレンダリング後に1回は必ず呼ばれます。その後は引数の条件によって発火するかが変わります。このコードでは<code>foo</code>が依存条件としてセットされているので<code>foo</code>更新された後にも発火されます。ライフサイクルの1と2は出てきましたが3はどう使うのか。実は、上記のコードではこれは実装されていません。3を行うには1つ目の引数の関数を修正する必要があります。それは、関数の戻り値として関数を返す事です。少し書き換えます。<pre><code class=language-js>const [foo] = useState('');

useEffect(
 () =&gt; {
 console.log(foo);

 return () =&gt; {
 console.log('unmount');
 }
 }, [foo]
);
</code></pre>これでこのコンポーネントが削除される際に<code>unmount</code>とコンソールに表示されるはずです。<div class=n-md_h3-box><a href=#React_Hooks_∋_useEffect+2以外を実装 aria-label=2以外を実装のアンカー class=n-md_h3-anchor></a><h3 id=React_Hooks_∋_useEffect+2以外を実装 class=n-md_h3-heading>2以外を実装</h3></div>つまり更新時の処理はいらないを実現する方法です。これは依存条件に空配列を渡すだけで実装できます。 「最初の1回は必ず実行され…最後にも1回…」<pre><code class=language-js>useEffect(
 () =&gt; () =&gt; { /* ... */ }
 []
);
</code></pre>ここから3の削除時のライフサイクルもいらない場合はどうするか。関数を返さなければいいですね。<pre><code class=language-js>useEffect(
 () =&gt; { /* ... */ }
 []
);
</code></pre><div class=n-md_h3-box><a href=#React_Hooks_∋_useEffect+useLayoutEffect aria-label=useLayoutEffectのアンカー class=n-md_h3-anchor></a><h3 id=React_Hooks_∋_useEffect+useLayoutEffect class=n-md_h3-heading>useLayoutEffect</h3></div>ちなみにこちらの似たフックは、レンダリングされて反映される直前に実行されるライフサイクルです。ライフサイクルの順番が早いのは<code>useLayoutEffect &gt; useEffect</code>です。

コンポーネントで返した HTML 要素を使う時に使います。HTML 要素へ渡す場合、基本的に初期値は<code>null</code>を渡します。<pre><code class=language-js>const buttonRef = useRef(null);
</code></pre>要素は<code>buttonRef.current</code>に入りますが、コンポーネントがレンダリングされるまではその値は<code>null</code>です。レンダリング後は狙った要素の参照が入ります。<div class=n-md_h3-box><a href=#React_Hooks_∋_useRef+準備 aria-label=準備のアンカー class=n-md_h3-anchor></a><h3 id=React_Hooks_∋_useRef+準備 class=n-md_h3-heading>準備</h3></div><code>buttonRef.current</code>にほしい要素の<code>ref</code>属性にこの<code>buttonRef</code>を渡してあげます。<pre><code class=language-jsx>&lt;button ref={buttonRef&gt;
 foo
&lt;/button&gt; 
</code></pre>

React Hooks ∋ useImperativeHandle

React Hooks ∋ useRef

<code>useRef</code>と同じ様な使用用途です。<code>useRef</code>はコンポーネント内の HTML 要素を触る為のフックでしたが、<code>useImperativeHandle</code>は親コンポーネントにコンポーネント内の要素を触る為の手段を提供する為のフックです。<code>React.forwardRef</code>との違いは2つほどあると思います。<ol><li>コンポーネント内の要素を親コンポーネントから直接触られない</li><li>コンポーネント内の複数の要素（参照）を親コンポーネントは触ることができる</li></ol>例。このフックは親参照をもらうために<code>forwardRef</code>と共に使います。<pre><code class=language-jsx>const Checkbox = forwardRef((_, ref) =&gt; {
 const checkboxRef = useRef(null);

 useImperativeHandle(ref, () =&gt; ({
 check() {
 if (checkboxRef.current !== null) {
 checkboxRef.current.checked = true;
 }
 }
 }));

 return &lt;input ref={checkboxRef} type="checkbox" /&gt;;
});
</code></pre><code>forwardRef</code>によって親コンポーネントから<code>ref</code>が渡ってくる想定です。<code>useImperativeHandle</code>はこの<code>ref.current</code>にハンドラーを生やします。この例では<code>check</code>メソッドを持つオブジェクトを返していますが、これがまさに<code>ref.current.check</code>を実装していることになります。 この中の<code>useRef</code>は普段通りに使うだけです。親コンポーネントから<code>ref.current.check()</code>が呼ばれるとコンポーネント内の<code>input[type=checkbox]</code>のチェックフラグを<code>true</code>に書き換えてます。（React にはもっと優れた方法があるので実際にはこのように実装しないように）<div class=n-md_h3-box><a href=#React_Hooks_∋_useImperativeHandle+親コンポーネント aria-label=親コンポーネントのアンカー class=n-md_h3-anchor></a><h3 id=React_Hooks_∋_useImperativeHandle+親コンポーネント class=n-md_h3-heading>親コンポーネント</h3></div>さて、親です。親では何度も言っている<code>ref.current.check()</code>の実行の仕組みとハンドラーを生やすための<code>ref</code>を<code>forwardRef</code>なコンポーネントに渡す必要があります。<pre><code class=language-jsx>export default () =&gt; {
 const ref = React.useRef();
 const onClick = React.useCallback(() =&gt; {
 ref.current.check();
 }, []);

 return (
 &lt;div className="App"&gt;
 &lt;Checkbox ref={ref} /&gt;
 &lt;button onClick={onClick}&gt;check!&lt;/button&gt;
 &lt;/div&gt;
 );
};
</code></pre><code>useRef</code>では要素が存在しない場合があるので、初期値を<code>null</code>としてましたが今回は必ずハンドラーが入るので初期値は要りません。<code>check!</code>ボタンを押して<code>input[type=checkbox]</code>にチェックが入るか<a href="https://codesandbox.io/s/adoring-jennings-ojn8d?fontsize=14&amp;hidenavigation=1&amp;theme=dark">確認</a>できたら完了です。

子コンポーネントの適当なものと紐付いた参照を親コンポーネントから覗きたい場合に使います。<code>React.forwardRef</code>でラップするコンポーネントは<code>props</code>の他に<code>ref</code>を2つ目の引数に受け取ります。この中身は親コンポーネントのどこかで生成された参照です。以下は1秒後にチェックボックスをチェックする<a href="https://codesandbox.io/s/nifty-blackwell-gqpi3?fontsize=14&amp;hidenavigation=1&amp;theme=dark">例</a>です。<pre><code class=language-jsx>const Child = React.forwardRef((_, ref) =&gt; {
 return &lt;input ref={ref} type="checkbox" /&gt;;
});

const App = () =&gt; {
 const ref = React.useRef(null);

 React.useEffect(() =&gt; {
 setTimeout(() =&gt; {
 ref.current.checked = true;
 }, 1000);
 }, []);

 return &lt;Child ref={ref} /&gt;;
}
</code></pre><code>Child</code>に対して<code>React.forwardRef</code>を使ってます。そして渡された<code>ref</code>を<code>input[type=checkbox]</code>に渡すことでこの要素を親から直接触れるようにしてます。<code>App</code>では描画が完了後にその<code>ref</code>を通して<code>input[type=checkbox]</code>の<code>checked</code>を真にすることでチェック済の状態に DOM を更新してます。

子要素参照 React.forwardRef

React のコンテキストは、<code>props</code>を使わずに子コンポーネントに親のデータを渡す為に使います。これにより<ul><li>複数のコンポーネントから成り立つコンポーネント間の<code>props</code>が簡単になる</li><li>子が特定の親の下に置かれてるどうか確認できる</li></ul>などの利点があります。コンテキストを作るには<code>React.createContext</code>を使います。これはデフォルトで渡されることになる値を引数として1つ受け取ります。<pre><code class=language-js>const Meta = React.createContext({title: 'blog title'});
</code></pre>この<code>Meta</code>はオブジェクトで<code>Provider</code>と<code>Consumer</code>2つのコンポーネントを持っています。 まず<code>Provider</code>は渡すデータを置くために使います。データはこの要素の<code>value</code>属性に渡します。　　 次に<code>Consumer</code>は渡ってきた値を受け取る為の要素です。 <code>Consumer</code>は上位階層に<code>Provider</code>がある時、一番近いそれに渡された値を受け取りますが、もし<code>Provider</code>が1つも無い場合、コンテキストを作る時に渡したデフォルト値を受け取ります。注意なのがこのコンポーネントの<code>children</code>はデータを引数に受け取る関数だという点です。<a href="https://codesandbox.io/s/pensive-water-c9tmc?fontsize=14&amp;hidenavigation=1&amp;theme=dark">例</a>です。この例は<code>Provider</code>と通す時と通さない時の動作を見れるもので、それぞれ<code>props</code>で何も値を渡していないのに<code>app title</code>、<code>blog title</code>と別の内容が表示されます。<pre><code class=language-jsx>const Meta = React.createContext({ title: "blog title" });

const Title = () =&gt; {
 return (
 &lt;Meta.Consumer&gt;
 {meta =&gt; {
 return &lt;h1&gt;{meta.title}&lt;/h1&gt;;
 }}
 &lt;/Meta.Consumer&gt;
 );
};

const App = () =&gt; {
 return (
 &lt;&gt;
 &lt;Title /&gt;
 &lt;Meta.Provider value={{ title: "app title" }}&gt;
 &lt;Title /&gt;
 &lt;/Meta.Provider&gt;
 &lt;/&gt;
 );
}
</code></pre><div class=n-md_h3-box><a href=#Context+useContext aria-label=useContextのアンカー class=n-md_h3-anchor></a><h3 id=Context+useContext class=n-md_h3-heading>useContext</h3></div><code>Consumer</code>の代わりに、<code>useContext</code>フックを使う方法もあります。このフックを使って上記のコードを書き換えると<a href="https://codesandbox.io/s/context-with-hook-mhosl?fontsize=14&amp;hidenavigation=1&amp;theme=dark">こう</a>なります。<pre><code class=language-jsx>const Meta = React.createContext({ title: "blog title" });

const Title = () =&gt; {
 const meta = React.useContext(Meta);

 return &lt;h1&gt;{meta.title}&lt;/h1&gt;;
};

export default function App() {
 return (
 &lt;&gt;
 &lt;Title /&gt;
 &lt;Meta.Provider value={{ title: "app title" }}&gt;
 &lt;Title /&gt;
 &lt;/Meta.Provider&gt;
 &lt;/&gt;
 );
}

</code></pre><code>useContext</code>へは<code>Consumer</code>を渡すわけではなくコンテキストそのものを渡します。

Context

<code>React.memo</code>で関数をラップすると、関数に<code>props</code>が渡ってくる前に「更新必要そうか？」が確認されるようになります。もちろん、「更新必要なさそう」と判断された場合は前回返されたコンポーネントの結果が使われます。例。<pre><code class=language-jsx>const Foo = React.memo(props =&gt; {
 return &lt;div&gt;{props.text}&lt;/div&gt;
});
</code></pre>これは以下と同等です。<pre><code class=language-jsx>const Foo = React.memo(
 props =&gt; {
 return &lt;div&gt;{props.text}&lt;/div&gt;
 },
 (prevProps, nextProps) =&gt; {
 return prevProps.text === nextProps.text;
 }
);
</code></pre>1つ目の引数に渡すのは単に Functional Component ですが、2つ目の引数には前回の<code>props</code>と今回の<code>props</code>を使って何らかの確認を行う関数を渡します。この関数が<code>false</code>を返すと「更新必要そう」と判断されます。また2つ目の関数は省略可能で、渡さなかった場合は浅い比較での比較（オブジェクトの第一階層同士のチェック）を行う関数になります。この部分をできるだけデフォルトの浅い比較で済ますために<code>useMemo</code>や<code>useCallback</code>などのフックが役立ちます。直前に生成したオブジェクト値などをプロパティに渡すと、参照同士の比較で常に<code>false</code>になってしまいますが、メモ関数から返された値を使うことで場合によって<code>true</code>となる値を取得することができます。つまり、メモ関数によってオブジェクトが同じかどうかはメモの結果により既に求められている為、この部分の比較を簡略化することができます。CodeSandbox上に<a href="https://codesandbox.io/s/reactmemo-ejo4h?fontsize=14&amp;hidenavigation=1&amp;theme=dark">例</a>を作りました。ボタンをクリックすると親階層の状態が更新される事により子コンポーネントも更新されようとしますが、浅い比較により<code>MemoFoo</code>ではコンポーネントが更新されない事が確認できます。

React.memo で更新制御

<code>React.Suspense</code>と<code>React.lazy</code>の2つを一緒に使うことで、必要になった時に初めてコードを読み込んでコンポーネントとしてレンダリングするというフローを簡単に実装できます。⚠️ この要素は SSR （サーバーサイドレンダリング）では使えません。その場合はその部分をうまく SSR 時には実行しないような処理として書く必要があります。<a href="https://codesandbox.io/s/nostalgic-thunder-zwqg1?fontsize=14&amp;hidenavigation=1&amp;theme=dark">例</a>です。まず適当に動的に読み込むコンポーネントを作ります。以下を<code>lazy-child.js</code>とします。<pre><code class=language-jsx>import React from "react";

export default () =&gt; &lt;div&gt;Lazy Child&lt;/div&gt;;
</code></pre>このコンポーネントを使って試してみます。<pre><code class=language-jsx>const LazyChild = React.lazy(() =&gt; import("./lazy-child"));

const App = () =&gt; {
 return (
 &lt;React.Suspense fallback={&lt;div&gt;loading...&lt;/div&gt;}&gt;
 &lt;LazyChild /&gt;
 &lt;/React.Suspense&gt;
 );
}
</code></pre><code>LazyChild</code>では<code>React.lazy</code>でラップして<code>lazy-child.js</code>を動的に読み込む関数を中に置いてます。返される値はコンポーネントですが、このコンポーネントは必ず<code>React.Suspense</code>以下に配置する必要があります。 もしそうしない場合<code>A React component suspended while rendering, but no fallback UI was specified.</code>というエラーになります。<code>React.Suspense</code>には<code>fallback</code>属性を渡します。これはコードを読み込んでいる最中に変わりに表示される要素になります。この動作を分かりやすくする為に一時的に以下のように書き換えてみると分かりやすいです。これはわざと読み込みに2秒以上かかるようにしたコードです。<pre><code class=language-jsx>const LazyChild = React.lazy(async () =&gt; {
 await new Promise(r =&gt; {
 setTimeout(r, 2000);
 });
 return import("./lazy-child");
});
</code></pre>

コード分割

jsx で何の気なしに<code>className</code>属性を使っている時の型は<code>React.HTMLAttributes</code>の中に<code>className?: string</code>と定義(<code>@types/react@16.9.2</code>では<code>@types/react/index.d.ts:1628</code>辺り)されています。また例えば<code>&lt;div&gt;</code>タグを使った時の型は<code>div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;;</code>と定義(<code>JSX.IntrinsicElements</code>で<code>@types/react/index.d.ts:2858</code>辺り)されています。ということで、実質<code>React.HTMLAttributes</code>が使われているということで、それを自分で上書きしてあげれば良さそうに感じますが<code>delare module &#39;react&#39;</code>で定義したとしても既存のプロパティの解決はデフォルトのもの(<code>@types/react</code>)が優先して使われるようなので無理です。ではどうするかと言うと、<code>JSX.IntrinsicElements</code>からすべて再定義してあげます。まずは既存の<code>JSX.IntrinsicElements</code>をすべてコピーし<code>delare module &#39;react&#39;</code>内に置きます。<pre><code class=language-ts>declare module 'react' {
 namespace JSX {
 interface IntrinsicElements {
 a: React.DetailedHTMLProps&lt;
 React.AnchorHTMLAttributes&lt;HTMLAnchorElement&gt;,
 HTMLAnchorElement
 &gt;;
 }
 }
}</code></pre>あとはこの<code>React.AnchorHTMLAttributes</code>を更に再定義してあげてあげれば目的は果たせそうです。ですが<code>React.AnchorHTMLAttributes</code>は<code>a</code>の場合だけで、<code>table</code>だったら<code>React.TableHTMLAttributes</code>、<code>input</code>だったら<code>React.InputHTMLAttributes</code>だったりと数が多くすべてに対応していたらそれだけで一苦労です。TypeScript には、<pre><code class=language-ts>interface A {
 foo?: string;
}

interface B {
 foo: 'foo'
}

type C = A &amp; B;
// C = {foo: 'foo'};</code></pre>になるという法則があります。そしてすべての<code>React.*HTMLAttributes</code>は<code>React.HTMLAttributes</code>を拡張したものなので、<code>React.HTMLAttributes</code>を継承したものをジェネリクス型として受け取れる何か型を定義し、<code>{className: 自分の型;}</code>とすればいけそうです。<code>declare module &#39;react&#39;</code>の中にこのようなものも定義してみました。<pre><code class=language-ts>type MyHTMLAttributes&lt;T extends React.HTMLAttributes&gt; = T &amp; {
 className?: 'foo' | 'bar';
}</code></pre>やっていることは前のコードと同じ<code>string | undefined</code>を<code>&#39;foo&#39; | &#39;bar&#39;</code>へ変換することです。あとはすべての<code>React.*HTMLAttributes</code>を<code>MyHTMLAttributes</code>で囲めば目的が果たせそうです。VSCode 以外はできるか分かりませんが、できるなら以下の組み合わせで一気に変換すると楽かなと思います。<pre><code class=language-txt>
\s(React.*HTMLAttributes(?!&gt;)&lt;[^,]*)
# から
 MyHTMLAttributes&lt;$1&gt;
# 先頭にスペース注意</code></pre>

TypeScript と共に使う時に className にリテラル型のユニオンを設定する

すべて個人的な考えです。都度更新。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Atom（原子）編+使用される要素の最小サイズが_Atom（原子） aria-label="使用される要素の最小サイズが Atom（原子）のアンカー" class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Atom（原子）編+使用される要素の最小サイズが_Atom（原子） class=n-md_h3-heading>使用される要素の最小サイズが Atom（原子）</h3></div>よく例にあるのがボタン（<code>&lt;button&gt;ボタン&lt;/button&gt;</code>）です。これは「クリックで何かしらアクションを起こす」という役割だけの要素だからです。<code>&lt;pre&gt;&lt;code&gt;...&lt;/code&gt;&lt;/pre&gt;</code>はコードを表示するための構成で、2つの HTML 要素で構成されています。これは Atom なのかすが、僕は Atom に分類しています。2つの要素を使っていますが、単にコードの入れる場所って役割以外に使うことないからです。Atom と Atom に分類し使うこともできると思いますが、それらを単体で使わないのであれば恐らく単に細分化しすぎで、やはり<code>atom + atom = atom</code>となるんじゃないかと思います。「この役目を果たすための最小サイズのラインはどこだろう？」と分類する感じで考えています。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Atom（原子）編+OOCSS aria-label=OOCSSのアンカー class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Atom（原子）編+OOCSS class=n-md_h3-heading>OOCSS</h3></div>OOCSSというのはオブジェクト指向CSSと呼ばれるCSS設計方法で、スタイル付けをスキン（見た目）とストラクチャ（構造）に分けて考えようという設計方法です。スキンは色とか装飾系だけをまとめたセレクタのことで、ストラクチャは幅、高さ、余白とか見た目以外のスタイルをまとめたセレクタです。Atom では「できる」を保証します。実際にどんな見た目になるかは上位層が決めます。 フォームの中では幅<code>100%</code>だけどヘッダーでは<code>300px</code>で使いたい<code>&lt;input&gt;</code>など、こういうものは上位層でそういった構造スタイルを付けるようにします。<pre><code class=language-tsx>// molecule
const SearchOfTopMenu = () =&gt; {
 return (
 {/* ... */}
 &lt;Input structure="fluid" skin="standard" /&gt;
 {/* ... */
 );
}</code></pre>Atomic では上位層に行くほど使いまわしの回数は減るはずで、どんどん具体的な内容にもなっていくかなと思うので、具体的になってから初めて構造は付ければ良いかなと思います。大抵デザインから Atomic を作ろうとするとあるレベルで要素をどんどん分解して最後に組み立てるだけとなってしまいがちですが、コンポーネントを作る段階ではなるべく「この要素はここで使うから」みたいな具体的な背景も頭の中から落とすよう（考えないよう）にするといいかもしれないなと思います。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Atom（原子）編+ロジックを持って、状態は持たない aria-label=ロジックを持って、状態は持たないのアンカー class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Atom（原子）編+ロジックを持って、状態は持たない class=n-md_h3-heading>ロジックを持って、状態は持たない</h3></div>これはHTMLの要素の動きに近いです。ロジックは持ってもいいです。<code>disabled</code>という属性値を持たせて、これが真ならアクションを起こせなくするや（まぁ<code>disabled</code>なら CSS で制御できそうですが）、<code>loading</code>が<code>true</code>ならテキストをローディングアイコンにするような簡単なものなど。ただしそれらを状態として保持しないようにします。<pre><code class=language-jsx>const PostButton = ({loading = false, disabled = false, children}) =&gt; {
 return (
 &lt;button className="..." disabled={disabled}&gt;
 {loading ? &lt;svg /* ローディングアイコン */ /&gt; : children}
 &lt;/button&gt;
 );
};
//
// 使う
// &lt;PostButton loading disabled&gt;投稿&lt;/PostButton&gt;</code></pre>HTML でも<code>&lt;input disabled placeholder=&quot;...&quot;&gt;</code>などで Atom 単位である程度動的に制御できるように作られています。<code>disabled</code>を消せばまた入力できるようになるでしょう。ロジックを持って状態は持たないのは自然だと思います。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Atom（原子）編+Functional_Component_で定義 aria-label="Functional Component で定義のアンカー" class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Atom（原子）編+Functional_Component_で定義 class=n-md_h3-heading>Functional Component で定義</h3></div>実装する際は、あとで拡張しやすいように最低でも Functional Component として定義するといいかと思います。あと、TypeScript を使っている場合は自分の型で完結させたほうが後々変にならないだろう（少しは）とも思います。<hr>ここから2019-06までの内容（アーカイブ）<hr><code>&lt;div&gt;</code>や<code>&lt;span&gt;</code> のようにある要素を組み上げるための部品が Atom です。 僕はよく<a href=https://www.styled-components.com/ >styled-components</a>を使いますが、これで生成したコンポーネントは全て最小単位の部品で Atom に属すと考えれます。<pre><code class=language-js>// FlexはAtom
const Flex = styled.div`
 display: flex;
`;
// MyFormはAtom
const MyForm = styled.form`
 /* ... */
`;
// MyInputはAtom
const MyInput = styled.input`
 /* ... */
`;</code></pre>これらはこのように使えます。<pre><code class=language-jsx>&lt;Flex&gt;
 &lt;MyForm&gt;
 &lt;MyInput /&gt;
 &lt;/MyForm&gt;
&lt;/Flex&gt;</code></pre>Styled Components を使っていないなら単一要素の SFC と１対１で CSS ファイルを作成し管理するのがいいと思います。<pre><code class=language-sh>foo
 ├─ index.jsx
 └─ foo.css</code></pre><pre><code class=language-js>// atoms/index.js
const Flex = props =&gt; &lt;div className="atom-Flex" {...props} /&gt;;</code></pre><pre><code class=language-css>/* atoms/flex.css */
.atom-Flex {
 display: flex;
}</code></pre><h4 id=属性値で見た目の情報を変える>属性値で見た目の情報を変える</h4>HTML の<code>&lt;input&gt;</code>に<code>readonly</code>や<code>disabled</code>といった属性を渡すとスタイルが変わるように<code>aria-*</code>や<code>data-*</code>といった属性を振り、それでスタイルを振り分けます。<pre><code class=language-js>const Flex = styled.div`
 display: flex;

 &amp;[aria-orientation='vertical'] {
 flex-direction: column;
 }
`;

const FlexItem = styled.div`
 flex: 0;

 &amp; + &amp; {
 margin-left: 1em;
 }

 &amp;[aria-label='main'] {
 flex: 0 1 1000px;
 }
`;

// &lt;Flex&gt;
// &lt;FlexItem&gt;...&lt;/FlexItem&gt;
// &lt;FlexItem aria-label="main"&gt;
// &lt;Flex aria-orientation="vertical" /&gt;
// &lt;/FlexItem&gt;
// &lt;/Flex&gt;</code></pre><h4 id="使えそうな<code>aria-*</code>属性一覧">使えそうな<code>aria-*</code>属性一覧</h4><ul><li><a href=https://momdo.github.io/wai-aria/states_and_properties.html#aria-orientation><code>aria-otientation</code></a> 要素が縦並びか横並びかどうか</li><li><a href=https://momdo.github.io/wai-aria/states_and_properties.html#aria-level><code>aria-level</code></a> ネストしたレイアウトに</li><li><a href=https://momdo.github.io/wai-aria/states_and_properties.html#aria-label><code>aria-label</code></a> 要素の区別に</li><li><a href=https://momdo.github.io/wai-aria/states_and_properties.html#aria-hidden><code>aria-hidden</code></a> 要素を非表示にする時に</li><li><a href=https://momdo.github.io/wai-aria/states_and_properties.html#aria-required><code>aria-required</code></a> フォームの必須フィールドなどに</li><li><a href=https://momdo.github.io/wai-aria/states_and_properties.html#aria-invalid><code>aria-invalid</code></a> フォームでフィールドエラーを表示する時などに</li><li><a href=https://momdo.github.io/wai-aria/states_and_properties.html#aria-checked><code>aria-checked</code></a> <code>input[type=checkbox]</code>のチェック済スタイルに</li><li><a href=https://momdo.github.io/wai-aria/states_and_properties.html#aria-selected><code>aria-selected</code></a> <code>input[type=radio],select</code>などの選択済みスタイルに</li><li><a href=https://momdo.github.io/wai-aria/states_and_properties.html#aria-busy><code>aria-busy</code></a> 読み込み中などに</li></ul><h4 id="追記 (2019-01) - 使える<code>aria-*</code>属性一覧">追記 (2019-01) - 使える<code>aria-*</code>属性一覧</h4>と思いましたが、要素にはもともとデフォルトで<code>role</code>が割り当てられていて、この<code>role</code>にこの<code>aria-*</code>は相応しくないというようなルールがあるようです。なので適当に上の属性を当てているとその辺りで Lighthouse のアクセシビリティのスコアが結構下がってしまいます。僕的には<code>aria-*</code>を使ってのスタイル制御は分かりやすく管理しやすいと思っているので、<code>aria</code>を<code>data</code>に変えたもの（<code>data-hidden</code>）を今は使っています。

React を Atomic Design で設計しようとした時の Atom の役割（個人的見解）

React と AtomicDesign - Atom（原子）編

すべて個人的な考えです。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Molecule（分子）編+Atom_（や_Molecule）をよしなに組み合わせるための_Molecule_（分子） aria-label="Atom （や Molecule）をよしなに組み合わせるための Molecule （分子）のアンカー" class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Molecule（分子）編+Atom_（や_Molecule）をよしなに組み合わせるための_Molecule_（分子） class=n-md_h3-heading>Atom （や Molecule）をよしなに組み合わせるための Molecule （分子）</h3></div>よくフォームで例えられていたりしますね。例えばこんな構造だとします。<pre><code class=language-jsx>&lt;SearchForm structure="top-menu" skin="standard"&gt;
 &lt;Input structure="round" skin="standard" /&gt;
 &lt;Button structure="round" skin="standard"&gt;検索&lt;/Button&gt;
&lt;/SearchForm&gt;</code></pre><code>SearchField</code>と<code>Input</code>、<code>Button</code>が Atom です。OOCSS で考えてるので<code>structure</code>と<code>skin</code>を持っています。しかし、それぞれのコンポーネントは子要素や兄弟要素との関連性をよく分かっていない要素達です。そういった要素たちのスタイルをよしなに組み合わせる為に Molecule 層で整えます。例えば<code>Input</code>と<code>Button</code>は今の状態ではピタッとくっついている状態だとして、間にスペースを開けたいんだという場合はこんな感じにします。（ちなみに、<a href=https://github.com/styled-components/styled-components>styled-components</a>です）<pre><code class=language-jsx>const Molecule = props =&gt; {
 const buttonSkin = React.useMemo(() =&gt; {
 if (props.value === '') {
 return 'disabled'
 }

 return 'enabled';
 }, [props.value]);

 return (
 &lt;div style={{marginTop: 10}}&gt;
 &lt;SearchForm structure="fluid" skin="standard"&gt;
 &lt;Input structure="round" skin="standard" value={props.value} /&gt;
 &lt;div style={{marginLeft: 10}}&gt;
 &lt;Button structure="round" skin={buttonSkin}&gt;
 検索
 &lt;/Button&gt;
 &lt;/div&gt;
 &lt;/SearchForm&gt;
 &lt;/div&gt;
 )
};</code></pre>マージン用の<code>div</code>でラップして空間を整えています。（これは<code>style</code>にしてますが、実際はコンポーネント化したものを使います） この辺は人の好みはあると思いますが、個人的にはマージンは要素外の要因だと思っているのでそれぞれの Atom で持つのはちょっと...という考えだからです。ちゃんとしたデザインなら<code>structure</code>で持たせるのもありがと思いますが、来るデザインによってはマージンとかバラバラだしうまく使い回せない事が多いのでこうなりました。ともかくこれで<code>Input</code>と<code>Button</code>の間には<code>10px</code>のスペースができました。Atom は要素の中に対して、Molecule は要素の外、つまりマージンや位置情報など他要素と関連し合うものをはここで設定しましょう。と考えると Template に近いものがあります。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Molecule（分子）編+計算済みの値を生成してもいい aria-label=計算済みの値を生成してもいいのアンカー class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Molecule（分子）編+計算済みの値を生成してもいい class=n-md_h3-heading>計算済みの値を生成してもいい</h3></div>例えば上記のサンプルコードの<code>skin={buttonSkin}</code>辺りがそれで、<code>input</code>用に渡した値を元に<code>button</code>の見た目を変更しています。<code>props</code>で渡した値を<code>skin</code>に渡せるようにしているのでアダプタ的な動きが近いかもしれません。要素間のレイアウトを整えるものなので、それら要素間の依存する関係の値は持っても混乱は少ないと考えてます。またここでも状態を持たないので、Molecule と Atom の区別はそれほどしなくてもいいかもしれません。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Molecule（分子）編+Functional_Component_で定義 aria-label="Functional Component で定義のアンカー" class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Molecule（分子）編+Functional_Component_で定義 class=n-md_h3-heading>Functional Component で定義</h3></div>実装する際は最低でも Functional Component として定義するといいかと思います。複数の要素を扱うようになってくるのでプロパティの更新がなければ再レンダリングしないなどの制御も必要になってくるかなと思います。

React と AtomicDesign - Molecule（分子）編

すべて個人的な考えです。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Organizm（有機体）編+Atom_や_Molecule_（や_Organizm）をよしなに組み合わせるための_Organizm_（有機体） aria-label="Atom や Molecule （や Organizm）をよしなに組み合わせるための Organizm （有機体）のアンカー" class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Organizm（有機体）編+Atom_や_Molecule_（や_Organizm）をよしなに組み合わせるための_Organizm_（有機体） class=n-md_h3-heading>Atom や Molecule （や Organizm）をよしなに組み合わせるための Organizm （有機体）</h3></div>Molecule と同じように。Atom や Molecule そして Organizm 要素をよしなに組み合わせて配置できるようにします。この層では中に Atom や Molecule そして Organizm を配置できます。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Organizm（有機体）編+データを取ってきて小要素に分配する aria-label=データを取ってきて小要素に分配するのアンカー class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Organizm（有機体）編+データを取ってきて小要素に分配する class=n-md_h3-heading>データを取ってきて小要素に分配する</h3></div>この層では子要素（Molecule や Atom）にレンダリングに必要なデータを渡してあげる役割もあります。従って、この層は小要素は何を欲しているかすべて知っている必要があり、それを元にデータを取ってくる必要があります。それは例えば<a href=https://github.com/alexnm/re-ducks>re-ducks</a>の考えを取り入れていて<a href=https://github.com/reduxjs/redux>redux</a>を使っているプロジェクトであれば、<code>useSelector</code>を使って直接持ってくることができます。データを取ってくるのは Page じゃないのかみたいな考えもあると思いますがコンポーネントの大きさによっても変わってくるかなと思います。例えば、全体をぼんやり見ているだけじゃただの石だけど、近くでじっくり見るとキラキラしていて綺麗みたいな（耳をすませばのアレ）もちろん Page でもデータを取ってきていいのですが、Page は Page で必要なものだけ、それ以外のじっくり見た時の追加情報はそれぞれ Organizm 層でも取ってきてもいいんじゃないかと思います。これは Page 層の肥大化を避けるという目的も大きいです。それは、Page 層でのレンダリングの制御が複雑になる事や、データを細部にまで行き渡す為にかなりの階層に伝えていかなければならない事を避ける狙いがあります。

React と AtomicDesign - Organizm（有機体）編

<div data-tag=img data-src=https://s3-ap-northeast-1.amazonaws.com/nju33.com/images/products/react/with-atomic-design-template-section/template.png alt=null style="min-height: 30em"></div>すべて個人的な考えです。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Template編+Template_は_間取り aria-label="Template は 間取りのアンカー" class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Template編+Template_は_間取り class=n-md_h3-heading>Template は 間取り</h3></div>Template 層は間取りです。例えば台所で考えると「冷蔵庫はここに置こう」「テーブルはここで」みたいに事前に決め、実際に電化製品から冷蔵庫が届いたら決められた場所に置いてもらうだけです。ただ間取りを考える人と実際に運んでいる置いてもらう人は別人です。個人的に Template 層は配置する人が迷わなくても決められた所に置けるようにすることだと思います。Organizm 以前との違いですが、個人的に Organism などは順番に埋まっていく、 Template は狙った位置にストンと入れるみたいなイメージの違いがあると思います。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Template編+Template_は何で定義してもいい aria-label="Template は何で定義してもいいのアンカー" class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Template編+Template_は何で定義してもいい class=n-md_h3-heading>Template は何で定義してもいい</h3></div>ただ僕は TypeScript にしかないですが、<code>abstract class</code>を使う方法がお気に入りです。<pre><code class=language-ts>abstract class DetailTemplate extends React.PureComponent {
 abstract Header(): JSX.Element;
 abstract Main(): JSX.Element;

 render() {
 return (
 &lt;ColumnLayout&gt;
 {/* 上部に固定されるOrganism要素 */}
 &lt;StickyMenu&gt;
 &lt;this.Header /&gt;
 &lt;/StickyMenu&gt;

 &lt;this.Main /&gt;
 &lt;/ColumnLayout&gt;
 )
 }
}</code></pre>継承したコンポーネントで<code>Header</code>を定義すると、それは勝手に<code>ColumnLayout</code>と<code>StickyMenu</code>の下に配置されレイアウトのマークアップを意識せずに良くなります。 また、これを継承した時に<code>Header</code>と<code>Main</code>を定義しなければコンパイルエラーにできるので、定義し忘れ防止もできます。この層はデータに依存することがあまりないようにできると思うので、狙った位置に置ける<code>JSX.Element</code>を返すただの関数でもいいと思います。

React を Atomic Design で設計しようとした時の Template の役割（個人的見解）

React と AtomicDesign - Template編

すべて個人的な考えです。<div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Page編+Template_を使って適切な位置に要素を配置する aria-label="Template を使って適切な位置に要素を配置するのアンカー" class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Page編+Template_を使って適切な位置に要素を配置する class=n-md_h3-heading>Template を使って適切な位置に要素を配置する</h3></div>例えば以下の<code>DetailTemplate</code>は　Abstract Class で、<code>Header</code>と<code>Main</code>は Abstract Property です。そしてそれらコンポーネントは、間取りはどんな感じか分からないですが、とりあえず適切な位置に配置されるようになっています。<pre><code class=language-ts>class FooPageContents extends DetailTemplate {
 // H1 は Atom
 Header = () =&gt; &lt;H1&gt;タイトル&lt;/H1&gt;;

 // Article は Organizm
 Main = () =&gt; &lt;Article in="foo" /&gt;;
}

const FooPage = () =&gt; { 
 return &lt;FooPageContents /&gt;;
}</code></pre><div class=n-md_h3-box><a href=#React_と_AtomicDesign_-_Page編+様々な副作用を担当 aria-label=様々な副作用を担当のアンカー class=n-md_h3-anchor></a><h3 id=React_と_AtomicDesign_-_Page編+様々な副作用を担当 class=n-md_h3-heading>様々な副作用を担当</h3></div>例えば、<code>&lt;header&gt;</code>の中身を変更するとかもこの層の役目です。<pre><code class=language-jsx>const FooPage = () =&gt; {
 React.useEffect(() =&gt; {
 document.title = 'foo - site'
 }, []);

 return &lt;FooPageContents /&gt;;
}</code></pre>ちなみに<a href=https://github.com/zeit/next.js/ >NextJS</a>ならマークアップだけで済みます。<pre><code class=language-jsx>import Head from 'next/head';

const FooPage = () =&gt; { 
 return (
 &lt;&gt;
 &lt;Head&gt;
 &lt;title&gt;foo - site&lt;/title&gt;
 &lt;/Head&gt;
 &lt;FooPageContents /&gt;
 &lt;/&gt;
 );
}</code></pre><a href=https://github.com/reduxjs/redux>Redux</a> を使っているなら Observer や共通するイベントの処理はこの層で適切に<code>dispatch</code>することで管理し、各 Organizm や Molecule でそれらを乱立しあまり負荷を掛けない作りにすると良いと思います。<pre><code class=language-jsx>import ObserverContext from '...';
// const ObserverContext = React.createContext();

const FooPage = () =&gt; {
 const observer = React.useMemo(() =&gt; {
 return new IntersectionObserver(entries =&gt; {
 /*...*/
 });
 }, []);

 React.useEffect(() =&gt; () =&gt; {
 observer.disconnect();
 });

 return (
 &lt;ObserverContext.Provider value={observer}&gt;
 &lt;FooPageContents observer={observer} /&gt;
 &lt;/ObserverContext.Provider=&gt;
 )
}</code></pre>

React と AtomicDesign - Page編

<div class=n-md_h3-box><a href=#JSXの中にインラインスクリプトを埋め込む+インラインスクリプト aria-label=インラインスクリプトのアンカー class=n-md_h3-anchor></a><h3 id=JSXの中にインラインスクリプトを埋め込む+インラインスクリプト class=n-md_h3-heading>インラインスクリプト</h3></div>こんな感じのインラインスクリプトを用意します。以下はGoogleAnalyticsの埋め込みタグです。<pre><code class=language-html>&lt;script async src="https://www.googletagmanager.com/gtag/js?id=あなたのid"&gt;&lt;/script&gt;
&lt;script&gt;
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'あなたのid');
&lt;/script&gt;</code></pre><div class=n-md_h3-box><a href=#JSXの中にインラインスクリプトを埋め込む+JSXに変換 aria-label=JSXに変換のアンカー class=n-md_h3-anchor></a><h3 id=JSXの中にインラインスクリプトを埋め込む+JSXに変換 class=n-md_h3-heading>JSXに変換</h3></div><code>dangerouslySetInnerHTML</code>attrに<code>__html: &#39;インラインスクリプト&#39;</code>を持ったオブジェクトをセットします。<pre><code class=language-html>&lt;script async src="https://www.googletagmanager.com/gtag/js?id=あなたのid" /&gt;
&lt;script
 dangerouslySetInnerHTML={{
 __html: `
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'あなたのid');
 `
 }}
/&gt;</code></pre><code>dangerouslySetInnerHTML.__html</code>は最初気持ち悪く感じるかもですが、こういうものなのでしょうがないです。 中身ないので<code>/&gt;</code>にするのも忘れずに書き換えます。

JSXの中にインラインスクリプトを埋め込む方法です。例えばGoogleAnalyticsの埋め込みコードなどを直接JSXに記述してみます。

JSXの中にインラインスクリプトを埋め込む

<div class=n-md_h3-box><a href=#Enzyme_で_.simulate()_した時に子要素の_props_が更新されない問題+バージョンなど aria-label=バージョンなどのアンカー class=n-md_h3-anchor></a><h3 id=Enzyme_で_.simulate()_した時に子要素の_props_が更新されない問題+バージョンなど class=n-md_h3-heading>バージョンなど</h3></div><pre><code class=language-json>{
 "devDependencies": {
 "enzyme": "^3.7.0",
 "jest": "^23.6.0"
 }
}</code></pre><div class=n-md_h3-box><a href=#Enzyme_で_.simulate()_した時に子要素の_props_が更新されない問題+例 aria-label=例のアンカー class=n-md_h3-anchor></a><h3 id=Enzyme_で_.simulate()_した時に子要素の_props_が更新されない問題+例 class=n-md_h3-heading>例</h3></div>以下は２番目の<code>Item</code>をクリックすると、次の状態では<code>aria-selected={true}</code>となる事を確認しようとしていたテストです。しかし、これは通りません。<pre><code class=language-jsx>const secondItem = mount(Component)
 .find(Item)
 .at(1);
secondItem.simulate('click');
expect(secondItem.prop('aria-selected')).toBeTruthy();</code></pre><div class=n-md_h3-box><a href=#Enzyme_で_.simulate()_した時に子要素の_props_が更新されない問題+解決 aria-label=解決のアンカー class=n-md_h3-anchor></a><h3 id=Enzyme_で_.simulate()_した時に子要素の_props_が更新されない問題+解決 class=n-md_h3-heading>解決</h3></div>チェックする時に再度<code>wrapper</code>から対象の要素を取得したものを使えば更新された状態の<code>Item</code>が取れます。こうすれば、通ります。<pre><code class=language-jsx>const secondItem = mount(Component)
 .find(Item)
 .at(1);
secondItem.simulate('click');
expect(
 wrapper
 .find(Item)
 .at(1)
 .prop('aria-selected')
).toBeTruthy();</code></pre><div class=n-md_h3-box><a href=#Enzyme_で_.simulate()_した時に子要素の_props_が更新されない問題+おまけ aria-label=おまけのアンカー class=n-md_h3-anchor></a><h3 id=Enzyme_で_.simulate()_した時に子要素の_props_が更新されない問題+おまけ class=n-md_h3-heading>おまけ</h3></div>一応<code>setTimeout</code>を使っても通るよおです。<pre><code class=language-jsx>const secondItem = mount(Component)
 .find(Item)
 .at(1);
secondItem.simulate('click');
setTimeout(() =&gt; {
 expect(
 wrapper
 .find(Item)
 .at(1)
 .prop('aria-selected')
 ).toBeTruthy();
}, 0);</code></pre>

Enzyme で .simulate() した時に子要素の props が更新されない問題

少し気になったので確認してみました。結論としては呼ばれます。<div class=n-md_h3-box><a href=#ReactDOM.createPortal_でマウントした要素の_Component#componentWillUnmount_は呼ばれるか+デモ_on_Codesandbox aria-label="デモ on Codesandboxのアンカー" class=n-md_h3-anchor></a><h3 id=ReactDOM.createPortal_でマウントした要素の_Component#componentWillUnmount_は呼ばれるか+デモ_on_Codesandbox class=n-md_h3-heading>デモ on Codesandbox</h3></div><iframe src=https://codesandbox.io/embed/y7p89movzj style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

ReactDOM.createPortal でマウントした要素の Component#componentWillUnmount は呼ばれるか

もしかしたら色々な<code>@types/react</code>のバージョンが混在しているからかもしれません。<div class=n-md_h3-box><a href=#React_の型周りでめちゃくちゃエラーがでるようになった+@types/react_のバージョンが混在していないか調べる aria-label="@types/react のバージョンが混在していないか調べるのアンカー" class=n-md_h3-anchor></a><h3 id=React_の型周りでめちゃくちゃエラーがでるようになった+@types/react_のバージョンが混在していないか調べる class=n-md_h3-heading>@types/react のバージョンが混在していないか調べる</h3></div>以下のコマンドを実行してみてください。<pre><code class=language-sh>yarn list --pattern @types/react</code></pre>もし2階層も3階層も表示される場合は混在しています。<a href=https://gyazo.com/836a5970afb269ce768d64e811b273a0><div data-tag=img data-src=https://i.gyazo.com/836a5970afb269ce768d64e811b273a0.png alt=null style="min-height: 30em"></div></a>これを解決するにはプロジェクトルートで以下を実行します。<pre><code class=language-sh>rm -rf node_modules yarn.lock &amp;&amp; yarn cache clean &amp;&amp; yarn</code></pre>再度<code>yarn list</code>します。1階層になっていれば大丈夫だと思います。<pre><code class=language-sh>yarn list --pattern @types/react</code></pre><a href=https://gyazo.com/7fec229bad0705c1caee10440063a047><div data-tag=img data-src=https://i.gyazo.com/7fec229bad0705c1caee10440063a047.png alt=null style="min-height: 30em"></div></a>ただReactの昔のバージョンを使ってるときは、これでは駄目な気がします。その時が訪れたら追記するかもしれません。

React の型周りでめちゃくちゃエラーがでるようになった

<div class=n-md_h3-box><a href=#react-dnd_の使い方+準備 aria-label=準備のアンカー class=n-md_h3-anchor></a><h3 id=react-dnd_の使い方+準備 class=n-md_h3-heading>準備</h3></div>HOC な<a href=http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context><code>DragDropContext</code></a>で親コンポーネントをラップするか、<a href=http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context-provider><code>DragDropContextProvider</code></a>を親コンポーネントマークアップに含める必要があります。ただし、<code>DragDropContextProvider</code>は、<code>react &gt;= 16.0.0</code>かつ<code>react-dnd &gt;= 4.0.0</code>なバージョンである必要があります。またブラウザ上で動作させる場合<code>react-dnd-html5-backend</code>というパッケージも必要です。イベントハンドラーのようなものがまとまったもので、これを使って色々解決する感じのようです。<code>react-dnd</code>と<code>react-dnd-html5-backend</code>は基本同じバージョンを使うようにしましょう。ルートとしては以下のようになります。<h4 id=DragDropContextProvider>DragDropContextProvider</h4><pre><code class=language-jsx>import React from 'react';
import {DragDropContextProvider} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

class App extends React.Component {
 render() {
 return (
 &lt;DragDropContextProvider backend={HTML5Backend}&gt;
 &lt;div&gt;なんでもいい&lt;/div&gt;
 &lt;/DragDropContextProvider&gt;
 );
 }
}

export default App;</code></pre><h4 id=DragDropContext>DragDropContext</h4><pre><code class=language-jsx>import React from 'react';
import {DragDropContext} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

class App extends React.Component {
 render() {
 return &lt;div&gt;なんでもいい&lt;/div&gt;;
 }
}

export default DragDropContext(HTML5Backend)(App);</code></pre>少し分かりづらいですが、<code>this.props</code>の値などは増えたりしないので注意です。<div class=n-md_h3-box><a href=#react-dnd_の使い方+Drag_and_Drop_(dnd) aria-label="Drag and Drop (dnd)のアンカー" class=n-md_h3-anchor></a><h3 id=react-dnd_の使い方+Drag_and_Drop_(dnd) class=n-md_h3-heading>Drag and Drop (dnd)</h3></div>Drag イベントを設定したいなら<code>DragSource</code>、 Drop イベントを設定したいなら<code>DropTarget</code>HOCを使います。どちらも<code>react-dnd</code>から提供されています。<h4 id=共通項目>共通項目</h4>どちらとも第1引数には<code>type</code>を指定します。これは処理をつなげる為に使われます。<code>Foo</code>というタイプの Draggable 要素を<code>Foo</code>というタイプの Droppable 要素へドロップした時に初めてドラッグからドロップという一連の処理が実行されます。第３引数の<code>connect</code>は<code>react-redux</code>の<code>connect</code>と同じような動きです。<code>react-dnd</code>で管理している状態（<code>state</code>）をコンポーネントの<code>props</code>へ渡す為に使います。第２引数の<code>spec</code>は関数をまとめたオブジェクトを渡します。これらのキー名は<code>react-dnd</code>が指定している名前にする必要があり、その一部は必須項目になっています。<code>react-dnd</code>の関数の引数にある<code>props</code>は HOC の対象となるコンポーネントの<code>props</code>の値、<code>monitors</code>は、<a href=http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor>react-dnd.github.io/r/d/a/drag-source-monitor</a>にある内容がオブジェクトになった形のものが入っています。 <code>props</code>などは対象先ですが、<code>monitors</code>には対象元が入っているような感じです。<h4 id=DragSource>DragSource</h4><code>spec</code>には、<code>beginDrag(props, monitor, component)</code>, <code>endDrag(props, monitor, component)</code>, <code>canDrag(props, monitor)</code>, <code>isDragging(props, monitor)</code>が設定でき、<code>beginDrag</code>だけは必須項目です。それぞれ、<code>beginDrag</code>はドラッグが始まったタイミングに発火し、<code>endDrag</code>はドラッグが終わったタイミングに発火します。<code>beginDrag</code>や<code>endDrag</code>戻り値は、<code>monitor.getItem()</code>で取り出せるようになります。<code>canDrag</code>はドラッグできるかの動的制御に使います。HOC の対象となるコンポーネントでは最小限、<code>connect</code>で<code>connect.dragSource()</code>を受け取り Drap 対象とする<code>JSX.Element</code>をその関数でラップする必要があります。<pre><code class=language-jsx>import {DragSource} from 'react-dnd';

DragSource(
 'BLOCK',
 {
 beginDrag(props) {
 console.log('beginDrag');
 return props;
 }
 },
 connect =&gt; {
 return {
 connectDragSource: connect.dragSource()
 };
 }
)(
 class extends React.Component {
 render() {
 return this.props.connectDargSource(
 &lt;div style={{style: 'orange', width: 100, height: 100}} /&gt;
 );
 }
 }
);</code></pre><h4 id=DropTarget>DropTarget</h4>先程 Drop 側の<code>type</code>を<code>BLOCK</code>で指定したのでコチラ側も<code>BLOCK</code>を指定します。こちらの<code>spec</code>は、<code>drop(props, monitor, component)</code>, <code>hover(props, monitor, component)</code>, <code>canDrop(props, monitor)</code>となっており、<code>canDrop</code>は概ね<code>canDrag</code>のものと同じです。 こちらには必須となっている項目はありません。<code>drop</code>は Dragable 要素を Droppable 要素の上で話した時に実行され、<code>hover</code>は重なっている間連続で実行されます。またこちらでは最小限、<code>connect</code>で<code>connect.dropTarget(),</code>を受け取り Drop 対象とする<code>JSX.Element</code>をその関数でラップする必要があります。<pre><code class=language-jsx>import {DropTarget} from 'react-dnd';

DropTarget(
 'BLOCK',
 {
 drop(props) {
 console.log('drop');
 // onDrop は `&lt;Foo onDrop={() =&gt; {}} /&gt;`
 // のように渡したもの
 // props.onDrop();
 }
 },
 connect =&gt; {
 return {
 connectDrogTarget: connect.dropTarget()
 };
 }
)(
 class extends React.Component {
 render() {
 return this.props.connectDrogTarget(
 &lt;div style={{style: 'orange', width: 100, height: 100}} /&gt;
 );
 }
 }
);</code></pre><h4 id="Drag も Drop もできる要素">Drag も Drop もできる要素</h4><code>connect.dragSource()</code>と<code>connect.drogTarget()</code>２つでラップしてあげればいけます。<pre><code class=language-jsx>const Draggable = DragSource(/* ... */);
const Droppable = DropTarget(/* ... */);

const DNDCompoennt = Droppable(
 Droppable(
 class extends React.Component {
 render() {
 const {connectDrogTarget, connectDragSource} = this.props;

 return connectDropTarget(
 connectDragSource(
 &lt;div style={{style: 'orange', width: 100, height: 100}} /&gt;
 )
 );
 }
 }
 )
);</code></pre><div class=n-md_h3-box><a href=#react-dnd_の使い方+仕上げ aria-label=仕上げのアンカー class=n-md_h3-anchor></a><h3 id=react-dnd_の使い方+仕上げ class=n-md_h3-heading>仕上げ</h3></div><code>DragDropContextProvider</code>より深い部分か<code>DragDropContext</code>を適用したコンポーネント以下の部分で使うだけです。<pre><code class=language-jsx>class App extends React.Component {
 render() {
 return (
 &lt;DragDropContextProvider backend={HTML5Backend}&gt;
 &lt;DNDComponent
 onDrop={() =&gt; {
 console.log('drop');
 }}
 /&gt;
 &lt;/DragDropContextProvider&gt;
 );
 }
}</code></pre>

react-dnd の使い方

<code>react-transition-group@^2</code>で提供されているコンポーネントは<ul><li>Transition</li><li>CSSTransition</li><li>TransitionGroup</li></ul>の３つです。<div class=n-md_h3-box><a href=#react-transition-group_の使い方+Transition aria-label=Transitionのアンカー class=n-md_h3-anchor></a><h3 id=react-transition-group_の使い方+Transition class=n-md_h3-heading>Transition</h3></div><code>Transition</code>は以下のようなプロパティを取ります。<code>children</code>には<code>(status: &#39;entering&#39; | &#39;entered&#39; | &#39;exiting&#39; | &#39;exited&#39;) =&gt; JSX.Element</code>が渡されます。この<code>status</code>の状態を使ってクラス名や何かしらの属性を内部の要素に設定し、CSSなどを使ってアニメーションさせることができます。<code>in</code>は内部コンポーネントを表示するかどうかです。<code>in</code>が<code>false</code>の時は<code>exiting</code>から<code>exited</code>に向かい、<code>true</code>の時は<code>entering</code>から<code>entered</code>に向かいます。1番最初は単に<code>-ing</code>なしで<code>entered</code>か<code>exited</code>が直接設定されます。<code>timeout</code>は、<code>status</code>が<code>-ing</code>である状態の時間(msec)を指定します。これは<code>addEndListener</code>を設定しない場合は必須になります。 <code>addEndListener</code>は動的に<code>timeout</code>時間を設定したい場合に使えます。例えば CSS の<code>transition</code>でアニメーションするような場合、その終わりに<code>transitionend</code>イベントが発火しますが、その発火するまでの時間を使うことで<code>timeout</code>の代わりとすることができます。（修正箇所も減る）これは第一引数に<code>children</code>関数での戻り値の要素が渡り、第二引数では<code>-ing</code>の終わりということになる<code>done</code>関数が渡ってきます。この渡ってきたルート要素からアニメーションする要素を取得し、<code>transitionend</code>イベントで<code>done</code>を読んで、<code>-ing</code>を終えるといったことができます。注意点として、この<code>addEndListener</code>は<code>in</code>が変わるたびに毎回実行されます。そのためイベントの登録などをしている場合、実行回数分登録することになってしまうので、毎回<code>done</code>を呼ぶタイミングでイベントの解除模するといいと思います。<iframe src="https://codesandbox.io/embed/n3091zvm5m?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe><code>mountOnEnter</code>は<code>in</code>が<code>true</code>になるまでマウントしなかったり、<code>unmountOnExit</code>は<code>exited</code>になる度アンマウントする為のプロパティです。消える時はアニメーションしなくていいみたいな場合に使うといい感じです。また<code>onEntered</code>や<code>onExited</code>などを渡して完了した時に連動してある処理を行うこともできます。ほかに、<ul><li>直前の <code>onEnter</code>, <code>onExit</code></li><li><code>-ing</code>の<code>onEntering</code>, <code>onExiting</code></li></ul>があります。<div class=n-md_h3-box><a href=#react-transition-group_の使い方+CSSTransition aria-label=CSSTransitionのアンカー class=n-md_h3-anchor></a><h3 id=react-transition-group_の使い方+CSSTransition class=n-md_h3-heading>CSSTransition</h3></div>内部的にはある程度設定済みの<code>Transition</code>です。与えられた<code>Transition</code>と同様の<code>in</code>や<code>timeout</code>やこのコンポーネント独自の<code>classNames</code>を元に主により高機能なクラス名の管理を行ってくれます。与えた<code>classNames</code>にサフィックスとして<code>-enter</code>, <code>-enter-active</code>, <code>-enter-done</code>, <code>-exit</code>, <code>-exit-active</code>, <code>-exit-done</code>, <code>-appear</code>, <code>-appear-active</code>がルート要素に付くようになるので、それらのクラス名を使って CSS でアニメーションを設定します。サフィックスの名前は以下のような状態だと思うといいかなと思います。<ul><li><code>-enter</code>と<code>-exit</code>は<code>Transition</code>の<code>-ing</code>が付く直前に付き、<code>-done</code>が付く時取り除かれる<ul><li>または<code>onEnter</code>と<code>onExit</code>は呼ばれたタイミングから<code>onEntered</code>や<code>onExited</code>が呼ばれるタイミングまで</li></ul></li><li><code>-enter-active</code>と<code>-exit-active</code>は<code>Transition</code>の<code>-ing</code>の別名</li><li><code>-enter-done</code>と<code>-exit-done</code>は<code>Transition</code>の<code>-ed</code>の別名</li></ul><iframe src="https://codesandbox.io/embed/k9y18wjolr?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe><div class=n-md_h3-box><a href=#react-transition-group_の使い方+TransitionGroup aria-label=TransitionGroupのアンカー class=n-md_h3-anchor></a><h3 id=react-transition-group_の使い方+TransitionGroup class=n-md_h3-heading>TransitionGroup</h3></div>1つ1つが<code>Transition</code>を持つような配列要素をレンダリングしたい時にそれらをラップするように使うだけです。注意点は２つあります。まず、各配列のルート要素は<code>Transition</code>である必要があります。2つ目は<code>Transition</code>には<code>in</code>ではなく<code>key</code>が必須です。またこれはユニークな値である必要があります。<code>in</code>は<code>TransitionGroup</code>が<code>key</code>から有無を判定して自動で設定してくれるので考えないで済みます。<pre><code class=language-jsx>import {TransitionGroup} from 'react-transition-group';

(() =&gt; {
 &lt;TransitionGroup&gt;
 {items.map(item =&gt; {
 return 
 &lt;CSSTransition key={item.id}&gt;{
 status =&gt; {
 /* ... */
 }
 }&lt;/CSSTransition&gt;
 );
 })
 &lt;/TranitionGroup&gt;
})();</code></pre>

react-transition-group の使い方

<code>svgr</code>は<code>.svg</code>ファイルから React コンポーネントに楽に変換できる CLI ツール（モジュール）です。使うには実行ファイルのインストールが必要です。<pre><code class=language-sh>yarn add -D @svgr/cli</code></pre><div class=n-md_h3-box><a href=#svgr_の使い方+Twitter_ロゴの_SVG_を変換 aria-label="Twitter ロゴの SVG を変換のアンカー" class=n-md_h3-anchor></a><h3 id=svgr_の使い方+Twitter_ロゴの_SVG_を変換 class=n-md_h3-heading>Twitter ロゴの SVG を変換</h3></div>こんな<code>&lt;svg&gt;</code>を<code>twitter.svg</code>という名前で用意しました。<pre><code class=language-html>&lt;svg
 aria-hidden="true"
 data-prefix="fab"
 data-icon="twitter"
 class="svg-inline--fa fa-twitter fa-w-16"
 role="img"
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 512 512"
&gt;
 &lt;path
 fill="currentColor"
 d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
 &gt;&lt;/path&gt;&lt;/svg
&gt;
</code></pre>このファイルに対して変換を行ってみます。２つのオプションがついています。　　 <code>--icon</code>は<code>&lt;svg&gt;</code>へ<code>width:1em</code>、<code>height:1em</code>を付けるオプションで、<code>--replace-attr-values</code>はマッチした属性値を渡した値で上書きするオプションです。<pre><code class=language-sh>npx @svgr/cli --icon --replace-attr-values "currentColor=#46a1eb" twitter.svg

# ファイルに出力
# yarn add -D @svgr/cli
# yarn --silent svgr --icon --replace-attr-values "currentColor=#46a1eb" twitter.svg &gt; svg-twitter.svg</code></pre>以下のような結果になりました。<pre><code class=language-jsx>import React from "react";

const SvgTwitter = props =&gt; (
 &lt;svg
 aria-hidden="true"
 data-prefix="fab"
 data-icon="twitter"
 className="twitter_svg__svg-inline--fa twitter_svg__fa-twitter twitter_svg__fa-w-16"
 viewBox="0 0 512 512"
 width="1em"
 height="1em"
 {...props}
 &gt;
 &lt;path
 fill="#fff"
 d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
 /&gt;
 &lt;/svg&gt;
);
</code></pre><div class=n-md_h3-box><a href=#svgr_の使い方+svg_の中身を_React_内で触りたい場合 aria-label="svg の中身を React 内で触りたい場合のアンカー" class=n-md_h3-anchor></a><h3 id=svgr_の使い方+svg_の中身を_React_内で触りたい場合 class=n-md_h3-heading>svg の中身を React 内で触りたい場合</h3></div>例えば <a href=http://snapsvg.io/ >Snapsvg</a> などで SVG の中の要素を触りたい時に必要かなという設定です。<code>svgr</code>コマンドをそのまま使うと<code>svgo</code>による最適化が行われてしまい、望んだ形で変換できない時があるかもしれません。その場合は<code>.svgo.yml</code>という設定ファイルをプロジェクトルートへ置き、設定を書くことで直すことができるかもしれません。<h4 id=一部タグがおかしい>一部タグがおかしい</h4>デフォルトでは<code>&lt;polygon points=&quot;...&quot;&gt;</code>といったタグは<code>&lt;path d=&quot;...&quot;&gt;</code>に変換されます。これを防ぐには、<code>convertShapeToPath</code>を切ります。<pre><code class=language-yml>plugins:
 - convertShapeToPath: false</code></pre><h4 id=一部タグが消える>一部タグが消える</h4>僕が遭遇したものだと、<code>&lt;clip-path&gt;</code>が消えました。これは以下の2行を設定することで消されることを防げました。<pre><code class=language-yml>plugins:
 - cleanupIDs: false
 - removeUnknownsAndDefaults: false</code></pre><div class=n-md_h3-box><a href=#svgr_の使い方+TypeScript_で出力した_.jsx_を読めるように aria-label="TypeScript で出力した .jsx を読めるようにのアンカー" class=n-md_h3-anchor></a><h3 id=svgr_の使い方+TypeScript_で出力した_.jsx_を読めるように class=n-md_h3-heading>TypeScript で出力した .jsx を読めるように</h3></div>以下のようなファイルを<code>aaa.jsx</code>であれば、<code>aaa.d.ts</code>となるように作成し、<code>SVGComponent</code>も<code>export</code>している名前に変換します。<pre><code class=language-ts>import React from 'react';

declare const SVGComponent: React.SFC;
export default SVGComponent;</code></pre>これで<code>import Aaa from &#39;./aaa&#39;;</code>などで<code>.tsx</code>に読み込めます。