React基礎 完全ガイド
ChatGPTやCopilotがコードを書ける今、なぜReactを自分で学ぶ必要があるのか。バイブコーディングの限界と、AIを使いこなすために基礎が必要な理由を整理する。
15 記事
← 第0回から読み始めるまえがき
Reactを始める前に
なぜReactなのか：コンポーネント思考と宣言的UIを理解する
HTMLのコピペ地獄からコンポーネント思考へ。jQueryとReactの違い、宣言的UIとは何かを対話形式でゼロから解説。
開発環境のセットアップ：Node.js・npm・VS Codeを整える
ReactでWebサイトを作るために必要な開発環境を整える。Node.jsのインストールからVS Codeの拡張機能まで、詰まりやすいポイントを先回りして解説。
Viteでプロジェクトを作る：Hello Reactを表示するまで
npm create vite@latestコマンドでReact+TypeScriptプロジェクトを作成し、生成されたファイル構造を理解して、ブラウザに最初の画面を表示するまでの全手順。
トップページを作る
コンポーネントとは：UIを部品に分けてHeaderとFooterを作る
Reactのコンポーネント分割を実践。App.tsxに書いたコードをHeader・Footerに切り出す手順と、import/exportの仕組みを解説。
JSXの書き方：HTMLとの違いを知ってヒーローセクションを作る
ReactのJSX構文をHTMLと比較しながら解説。className・{}式・自己終了タグ・フラグメントなど、つまずきやすいポイントを実例で学ぶ。
propsでデータを渡す：FeatureCardコンポーネントを作る
Reactのpropsの仕組みをTypeScriptの型定義と合わせて解説。コピペから脱してデータを外から受け取るコンポーネントの作り方を学ぶ。
Tailwind CSSでスタイルを当てる：トップページのデザインを完成させる
Tailwind CSSの基本的な使い方をReactと組み合わせて解説。クラス名の読み方、レスポンシブ対応、よく使うユーティリティクラスを実例で学ぶ。
リストレンダリングとkey：配列データからUIを生成する
Reactでの配列のmap()によるリストレンダリングを解説。keyプロパティが必要な理由と、よくある間違いをFeatureCard実装を通じて学ぶ。
登場人物紹介ページを作る
stateとuseState：クリックで選択キャラを切り替える
useStateでキャラクター選択状態を管理する実装を通じて、stateの概念・更新関数・再レンダリングの仕組みを対話形式で解説。
イベントハンドリング：クリック・入力・キーボードを受け取る
ReactのonClick・onChange・onKeyDownなどのイベント処理を解説。アロー関数で包む理由、イベントオブジェクトの使い方、よくある間違いを実例で学ぶ。
条件付きレンダリング：画像なしキャラのプレースホルダーを作る
Reactの条件付きレンダリングを&&・三項演算子・早期returnで実装。実際に画像が揃っていないキャラクターへの対応を通じて、現場に即した使い分けを学ぶ。
コンポーネント設計：CharacterCardとRosterCardに分割する
大きくなったcharacters-page.tsxをCharacterCard・RosterCard・Statに分割する実践を通じて、コンポーネントを分ける判断基準と設計の考え方を学ぶ。