React / TypeScript

生成AI時代の
React実践入門

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

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

最新記事

NEW
すべて見る →

シリーズの新着回・新規記事をまとめてチェックできます。

NEW中級reactreact-compiler

React Compiler 1.0で手書きメモ化を卒業する

安定版になったReact Compilerを実際に試す。Vite 8環境への導入からDevToolsでの効果確認、既存のuseMemoとの付き合い方までを動かしながら解説する。

2026-07-19React最新ラボ:話題の新技術を実際に試す
NEW中級reactreact19

React 19.2の<Activity>とuseEffectEventを試す

React 19.2で安定版になったActivityとuseEffectEventを実際に試す。タブを切り替えても状態が消えないUIと、useEffectの依存配列の悩み解消を動かしながら解説する。

2026-07-19React最新ラボ:話題の新技術を実際に試す
NEW中級reacttanstack-start

TanStack Start v1を試す:型安全フルスタックReact

v1リリース候補になったTanStack Startを実際に試す。プロジェクト作成からファイルベースルーティング、Server Functionsまでを動かしながら解説する。

2026-07-19React最新ラボ:話題の新技術を実際に試す
中級reactreact19

<ViewTransition>でアニメーション遷移を実際に試す

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

2026-06-27React最新ラボ:話題の新技術を実際に試す
中級reactwaku

最小Reactフレームワーク Waku をCloudflareで動かす

Jotai作者による最小Reactフレームワーク Waku を実際に試す。プロジェクト作成からServer Components、Cloudflareへのデプロイまでを手順を追って動かしながら解説する。

2026-06-27React最新ラボ:話題の新技術を実際に試す
中級reactreact-bits

React Bitsでアニメ付きUIを最短実装する

アニメ付きUIコンポーネント集 React Bits を実際に試す。jsrepoでの導入からBlurTextの設置までを、このサイトと同じVite+Tailwind環境で動かしながら解説する。

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

学習ロードマップ

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

シリーズで体系学習

すべて見る →

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

⚛️

React基礎 完全ガイド

初級

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

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

Hooks完全解説

中級

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

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

小学生からはじめるReact

小学生から

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

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

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

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

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

TypeScript × React 実践ガイド

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

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

テーマから探す

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

コンポーネントuseStateuseEffectuseContextuseReduceruseRefuseMemouseCallbackカスタムHookTypeScriptエラー解決パフォーマンスすべてのタグ →

このサイトで学べること

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