React / TypeScript

生成AI時代の
React実践入門

React基礎・Hooks・TypeScript・エラー解決まで対話形式で学ぶ。このサイト自体をゼロから作りながら進める実践入門です。

りこりこ×たけるたけるの対話形式で学ぶ
📄56 記事
📚5 シリーズ
初級〜中級を網羅
💴完全無料

学習ロードマップ

このサイトは、以下の順に学ぶとスムーズです。

シリーズで体系学習

すべて見る →

テーマごとに体系化された記事群。第0回から順番に読み進めることができます。

⚛️

React基礎 完全ガイド

初級

ChatGPTやCopilotがコードを書ける今、なぜReactを自分で学ぶ必要があるのか。バイブコーディングの限界と、AIを使いこなすために基礎が必要な理由を整理する。

15 記事·第0回から読む →
🪝

Hooks完全解説

中級

ReactのuseStateを完全解説します。型推論・関数型更新・オブジェクト・配列のイミュータブルな更新方法・複数stateの使い分けまで、実務で使えるパターンを実例付きで学べます。

12 記事·第0回から読む →
🧒

小学生からはじめるReact

小学生から

小学生からはじめるReact入門の第0回。プログラミングとは何かを身近なたとえで紹介し、このシリーズで最後にどんなゲームやアプリを作れるようになるのかを案内します。

14 記事·第0回から読む →
📖

React最新ラボ:話題の新技術を実際に試す

Reactの実験的なViewTransitionコンポーネントを実際に試す。リストの並び替えや要素の出入りにアニメーションを付ける方法を、Vite環境で動かしながら解説する。

3 記事·第0回から読む →
📖

TypeScript × React 実践ガイド

TypeScriptでReactのprops型を正しく定義する方法を解説。必須・省略可能・デフォルト値・children・ユニオン型・discriminated unionまで、実務で使うパターンを実例付きで網羅します。

3 記事·第0回から読む →

テーマから探す

特定のHookやテーマで記事を絞り込めます。

このサイトで学べること

Reactコンポーネントの設計と分割
propsとchildren・型安全な受け渡し
useState・フォーム制御・条件分岐
useEffectと副作用・非同期処理
useContextとprops drilling解消
useReducerによる複雑な状態管理
useRef・useMemo・useCallbackの最適化
カスタムHookによるロジック再利用
TypeScriptとReactの型定義パターン
よくあるエラーの原因と修正方法
メモリリーク・クリーンアップの実装
React 18コンカレント機能(useTransition)
初級reactprops

【解決】Reactでpropsがundefinedになる・更新されない原因と対処法

Reactでpropsがundefinedになる・値が変わらない原因を解説。親から正しく渡せていないケース・デフォルト値の設定・オプショナルな型定義・初回レンダリング時の対処まで実例付きで説明します。

2024-04-03

中級reacthooks

【解決】useEffectでasync/awaitを使う正しい方法と注意点

useEffectに直接asyncを付けてはいけない理由と、正しいasync/awaitの書き方を解説。内部関数として定義する方法・クリーンアップとの組み合わせ・競合状態(race condition)の防ぎ方まで実例付きで説明します。

2024-04-02

初級reacterror

【解決】Objects are not valid as a React child エラーの修正方法

ReactのObjects are not valid as a React childエラーを解説。オブジェクト・Date・Promiseをそのまま描画しようとした際の原因と、文字列への変換・条件分岐・プロパティ参照による解決方法を実例付きで説明します。

2024-04-01

中級reacttypescript

【解決】TypeScript × React でよくある型エラー集:原因と修正パターン

TypeScript + Reactでよく遭遇する型エラーを解説します。propsの型定義・イベントハンドラの型・useStateの型引数・children・非同期の型推論など実務頻出パターンをまとめました。

2024-03-05

中級reacterror

【解決】useEffectの無限ループを止める:原因別5パターンの修正方法

useEffectが無限ループする原因を5パターンに分けて解説します。依存配列の誤り・オブジェクト参照・関数・setStateの連鎖など、よくあるパターンと具体的な修正コードを示します。

2024-03-04

初級reacterror

【解決】Each child in a list should have a unique key エラーの修正方法

ReactのEach child in a list should have a unique 'key' propエラーを解説。keyが必要な理由・正しいkeyの選び方・indexをkeyにしてはいけないケースを実例付きで説明します。

2024-03-03