React基礎完全ガイド

Reactの基礎を、実際にWebサイトを作りながら学ぶ全15回の参考書。環境構築、コンポーネント、JSX、props、state、ルーティングからCloudflare Pagesへの公開まで順に解説します。

15 記事

最初の記事から読み始める

第0章

まえがき

第0回

生成AI時代に、なぜフレームワークを学ぶのか

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

初級

第1章

Reactを始める前に

第1回

なぜReactなのか：コンポーネント思考と宣言的UIを理解する

HTMLのコピペ地獄からコンポーネント思考へ。jQueryとReactの違い、宣言的UIとは何かを対話形式でゼロから解説。

初級第2回

開発環境のセットアップ：Node.js・npm・VS Codeを整える

ReactでWebサイトを作るために必要な開発環境を整える。Node.jsのインストールからVS Codeの拡張機能まで、詰まりやすいポイントを先回りして解説。

初級第3回

Viteでプロジェクトを作る：Hello Reactを表示するまで

npm create vite@latestコマンドでReact+TypeScriptプロジェクトを作成し、生成されたファイル構造を理解して、ブラウザに最初の画面を表示するまでの全手順。

初級

第2章

トップページを作る

第4回

コンポーネントとは：UIを部品に分けてHeaderとFooterを作る

Reactのコンポーネント分割を実践。App.tsxに書いたコードをHeader・Footerに切り出す手順と、import/exportの仕組みを解説。

初級第5回

JSXの書き方：HTMLとの違いを知ってヒーローセクションを作る

ReactのJSX構文をHTMLと比較しながら解説。className・{}式・自己終了タグ・フラグメントなど、つまずきやすいポイントを実例で学ぶ。

初級第6回

propsでデータを渡す：FeatureCardコンポーネントを作る

Reactのpropsの仕組みをTypeScriptの型定義と合わせて解説。コピペから脱してデータを外から受け取るコンポーネントの作り方を学ぶ。

初級第7回

Tailwind CSSでスタイルを当てる：トップページのデザインを完成させる

Tailwind CSSの基本的な使い方をReactと組み合わせて解説。クラス名の読み方、レスポンシブ対応、よく使うユーティリティクラスを実例で学ぶ。

初級第8回

リストレンダリングとkey：配列データからUIを生成する

Reactでの配列のmap()によるリストレンダリングを解説。keyプロパティが必要な理由と、よくある間違いをFeatureCard実装を通じて学ぶ。

初級

第3章

登場人物紹介ページを作る

第9回

stateとuseState：クリックで選択キャラを切り替える

useStateでキャラクター選択状態を管理する実装を通じて、stateの概念・更新関数・再レンダリングの仕組みを対話形式で解説。

初級第10回

イベントハンドリング：クリック・入力・キーボードを受け取る

ReactのonClick・onChange・onKeyDownなどのイベント処理を解説。アロー関数で包む理由、イベントオブジェクトの使い方、よくある間違いを実例で学ぶ。

初級第11回

条件付きレンダリング：画像なしキャラのプレースホルダーを作る

Reactの条件付きレンダリングを&&・三項演算子・早期returnで実装。実際に画像が揃っていないキャラクターへの対応を通じて、現場に即した使い分けを学ぶ。

初級第12回

コンポーネント設計：CharacterCardとRosterCardに分割する

大きくなったcharacters-page.tsxをCharacterCard・RosterCard・Statに分割する実践を通じて、コンポーネントを分ける判断基準と設計の考え方を学ぶ。

初級

第4章

仕上げて公開する

第13回

React Routerでページを繋ぐ：SPAのナビゲーションを実装する

React Router v7を使ってトップページと登場人物紹介ページを繋ぐ。LinkとaタグのSPAでの違い、ルート定義の仕組みをヘッダーのナビゲーション実装で学ぶ。

初級第14回

Cloudflare Pagesにデプロイ：作ったWebサイトを公開する

npm run buildでReactアプリをビルドし、Cloudflare PagesにGitHubリポジトリを接続して自動デプロイを設定する。URLが生まれるまでの全手順。

初級

React基礎 完全ガイド