最終更新:2022-09-22 (木) 16:55:34 (14d)  

React/コンセプト
Top / React / コンセプト

1. Hello World

2. JSX の導入

  • JSXを使う理由
  • JSXに式を埋め込む
  • JSXもまた式である
  • JSXで属性を指定する
  • JSXで子要素を指定する
  • JSXはインジェクション攻撃を防ぐ
  • JSXはオブジェクトの表現である

3. 要素のレンダー

  • 要素を DOM として描画する
  • レンダーされた要素の更新
    • React要素はイミュータブル
    • 一度要素を作成すると、その子要素もしくは属性を変更することはできません
  • React は必要な箇所のみを更新する
  • React DOM は要素とその子要素を以前のものと比較し、DOM を望ましい状態へと変えるのに必要なだけの DOM の更新を行います。

4. コンポーネントと props

  • React/コンポーネント
    • (“props” と呼ばれる)任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返す
  • コンポーネントのレンダー
  • コンポーネントを組み合わせる
  • コンポーネントの抽出
  • コンポーネントの分割
  • Props は読み取り専用
    • 自分自身の props は決して変更してはいけません。
  • 全てのReactコンポーネントは、自己のpropsに対して純関数のように振る舞わねばなりません。

5. state とライフサイクル

  • state を正しく使用する
    • state を直接変更しないこと
    • state の更新は非同期に行われる可能性がある
    • state の更新はマージされる

6. イベント処理

7. 条件付きレンダー

8. リストと key

9. フォーム

10. state のリフトアップ

11. コンポジション vs 継承

12. React の流儀