Blufflog

This blog is bluff.

React 公式ドキュメントをだいたい全部読みました

今更ながら React 公式ドキュメントをだいたい読みました。「だいたい」というのは、API リファレンスコントリビューティングガイドラインは読んでいないからです。前者は必要に応じて(まさにリファレンスとして)参照すれば良いかなと思い、後者はコントリビュートしたいことがあればそのタイミングで読めば十分と考えたためです。

まずはチュートリアルを実施し、その三目並べ(Tic-tac-toe)アプリのソースコードGitHub リポジトリに上げました。

応用課題的なものがいくつかあったので、このリポジトリではそれらも実装してあります。このチュートリアルはクラスコンポーネントベースなので、このリポジトリのコードを関数コンポーネントに置き換えるなどリファクタリングすると練習になりそうですが、面倒なのでやっていません。

チュートリアル完了後に読んだドキュメントは次の通りです。

  1. Installation
  2. Main Concepts
  3. Advanced Guides
  4. Hooks
  5. Testing
  6. FAQ

これから学び始める方に向けて特に重要なリソースを抜粋すると次のような感じかと思います。

最低限

A, B のいずれか。

A. 手を動かして学ぶ

  1. チュートリアル
  2. Installation

B. 読んで学ぶ

  1. Installation
  2. Main Concepts

基礎を一通り

  1. チュートリアル
  2. Installation
  3. Main Concepts
  4. Hooks

感想

一通りざっと学んだ感想としては、以下がポイントだと思いました。

  • 原則は、宣言的 UI を可能にするシンプルな JS ライブラリ(DOM 操作などは React に丸投げ)
  • ただし、レンダリングや state 更新タイミングなど、パフォーマンス上の各種最適化などのブラックボックスもある
  • JSX は React API を呼び出す JS コードのシンタックスシュガー
  • コンポーネントの状態は state で管理し、props 経由でコンポーネントにデータを渡す
  • データの流れはコンポーネントツリーの上(ルート側)から下への一方向
  • コンテクストはグローバル変数的(?)
  • ClassComponent.render() (or FunctionComponent()) → reconciliation(差分検出処理)→ commit の流れ
  • フックを使うとオブジェクト指向的なクラスインスタンスに依存せず、基本は全て JS の関数で動く世界になる
  • API を叩いて非同期にデータを取得して state を更新するなどの処理は、副作用(effect)として useEffect() 内で実行するのが一般的

P.S.

まだ日本語に翻訳されていないと思いますがベータ版の React 公式ドキュメントもあり、レンダーとコミットの説明などをざっと見る限りこちらも読むと理解が深まりそうです。

なお、今は Next.js のチュートリアル(?)を読んでいます。