React
複雑なUIを「コンポーネント」と呼ばれる小さく独立した部品から組み立てる データの変更によるUIのレンダリングはReactがしてくれる
createElementのような手続き的なDOM作成は不要
Reactの考え方
制御コンポーネント・非制御コンポーネント
ディレクトリ構成
Reactチュートリアル
これさえ読めばよさそう
ホームページ
参考文献
Web 動作確認環境
メモ
開発するにあたってのルール
コンポーネント名は常に頭を大文字
CSSクラスをclassNameで指定する
<li>のようなリストの各項目には一意に識別可能な文字列または数値を渡す必要がある
（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返す
propsは読み取り専用で書き換えない
stateを直接変更してはいけない
setState()で変更する
クラスコンポーネントの場合
親コンポーネントがstateを持ってていて、子コンポーネントがそのstateを変更させたいとき、stateを変更させるような関数をpropsにセットする
state を所有してセットするコンポーネント自身以外からはその state にアクセスすることができない
設計
別のコンポーネントに切り出す判断基準
UI の一部（Button、Panel、Avatar など）が複数回使われている場合
その UI 自体が複雑（App、FeedStory、Comment など）である場合
一度要素を作成すると、その子要素もしくは属性を変更することはできない
データが変更されると、React はコンポーネントを効率よく更新して再レンダーする
親コンポーネントの state が変更されると、個々の子コンポーネントも自動的に再レンダーされる
要素は映画の中のひとつのフレームのようなものであり、それは特定のある時点の UI を表す
イミュータブルであることのメリット
複雑な機能が簡単に実装できる
例：直接的なデータのミューテートを避ける（新しく作る）ことで、ヒストリをそのまま保って後で再利用することができる
変更の検出
ミュータブルなオブジェクトよりイミュータブルなオブジェクトの方が変更の検出が容易
コンポーネントのライフサイクル
Chrome と Firefox 用の React Devtools 拡張機能により、ブラウザの開発ツールで React のコンポーネントツリーを調べることができる
lsadsfj.icon以下はメモです。後で整理します。
私達の経験上、時間の経過によりどのように UI が変更されるかを考えるよりも、任意の時点において UI がどのように見えるべきかを考えることで、あらゆる類のバグを排除することができます。
Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立ちます。配列内の項目に安定した識別性を与えるため、それぞれの項目に key を与えるべきです。
React での state の共有は、state を、それを必要とするコンポーネントすべての直近の共通祖先コンポーネントに移動することによって実現します。これを “state のリフトアップ (lifting state up)” と呼びます。
異なるコンポーネント間で state を同期しようとする代わりに、トップダウン型のデータフローの力を借りるべきです。
複数の子要素からデータを集めたい、または 2 つの子コンポーネントに互いにやりとりさせたいと思った場合は、代わりに親コンポーネント内で共有の state を宣言する必要があります。親コンポーネントは props を使うことで子に情報を返すことができます。こうすることで、子コンポーネントが兄弟同士、あるいは親との間で常に同期されるようになります。
state はそれを定義しているコンポーネント内でプライベート
小コンポーネントから親コンポーネントのstateを直接書き換えることはできない
React では、イベントを表す props には onEvent という名前、イベントを処理するメソッドには handleEventという名前を付けるのが慣習となっています。
Key
リストの項目それぞれに対して key プロパティを与えることで、兄弟要素の中でそのアイテムが区別できるようにしてあげる必要があります。
リストが再レンダーされる際、React はそれぞれのリスト項目の key について、前回のリスト項目内に同じ key を持つものがないか探します。
もし以前になかった key がリストに含まれていれば、React はコンポーネントを作成します。
もし以前のリストにあった key が新しいリストに含まれていなければ、React は以前のコンポーネントを破棄します。
もし 2 つの key がマッチした場合、対応するコンポーネントは移動されます。
key はそれぞれのコンポーネントの同一性に関する情報を React に与え、それにより React は再レンダー間で state を保持できるようになります。
もしコンポーネントの key が変化していれば、コンポーネントは破棄されて新しい state で再作成されます。
動的なリストを構築する場合は正しい key を割り当てることが強く推奨されます。
public.icon