chibi-react について ​

このプロジェクトでは、Reactの核となる機能を一から実装しながら、その内部動作原理を深く理解していきます。大規模なReactライブラリから本質的な部分だけを抽出し、シンプルな形で再構築することで、Reactの魅力と仕組みを体感できるでしょう。

プロジェクトの目的 ​

• Reactの基本概念と内部メカニズムを理解する
• 最小限の実装でReactの本質を学ぶ
• TypeScriptを使った型安全な実装を体験する
• テスト駆動開発の流れを実践する

学習の流れ ​

本教材は以下の章構成で、段階的にReactの機能を実装していきます：

1. Introduction: プロジェクト概要と学習ロードマップ
2. Setup: 開発環境の構築
3. createElement: JSXからVirtual DOMへの変換
4. Renderer: Virtual DOMからリアルDOMへの描画
5. Diffing: 差分検出アルゴリズム
6. Fiber: 非同期レンダリングの仕組み
7. Hooks: 関数コンポーネントでの状態管理
8. Context: コンポーネントツリーを超えたデータ共有
9. Error Boundary: エラーハンドリング
10. Portal: 任意のDOM位置への描画

各章では、概念説明→テスト→実装→解説の流れで学習を進めていきます。

特徴 ​

• 関数コンポーネントのみ: 最新のReactベストプラクティスに沿った実装
• TypeScript: 型安全なコードで堅牢な実装を学ぶ
• テスト駆動: Jestによるテストファーストな開発手法
• ES Modules: モダンなモジュールシステムの活用
• 最小依存: 外部ライブラリに頼らない自作実装

さあ、Reactの内部を探検する旅に出かけましょう！