コードを試す前に
01でViteのreactテンプレートを作り、JavaScript/JSXのブラウザー向けアプリとして02以降を試します。TypeScript、Router、DB、認証は前提にしません。12の統合例も保存はstateの範囲のみです。
短い学習用の例です。各App.jsxは独立した例で、順に追記して一つの完成品にする形式ではありません。ファイル名、依存関係、未定義部分の前提は注記に記載します。問題内の抜粋や空欄は、そのまま実行するための完成コードではありません。
開発環境の準備を確認する →JavaScriptで基礎から学ぶ
部品と状態から、動きのある画面を組み立てる。
2026-10-06にReact公式ドキュメントのv19.3表示を確認。関数コンポーネントとHooksを使い、React 19系で通用する基礎に絞ります。
実際に導入したReact・Viteの版をpackage.jsonとロックファイルで確認してください。React公式ドキュメントの版表示は、教材のコードをその版で実行したという意味ではありません。
所要時間は本文と小さな演習の目安です。環境構築のトラブル対応、復習、最終制作の仕上げは別に時間を見込みます。
教材のコード例について
この学習サイト自体はAstroとJavaScriptで作った静的サイトです。コード例は教材であり、このページ内で実行するものではありません。各レッスンの準備と注意を読み、自分の開発環境で試してください。
進捗はコースごとに保存
完了レッスンと各問題の最新結果は、このブラウザのlocalStorageに保存します。Next.js・React・Astroは独立した記録で、他のコースに切り替えても残ります。端末間の同期は行いません。ブラウザのデータを消すと記録も削除されます。
公式資料
確認日:2026-10-06。最新の仕様は公式資料で確認してください。
- React: Quick Start ↗
- React: Creating a React App ↗
- React: Build a React app from Scratch ↗
- Vite: Getting Started ↗
- React: Your First Component ↗
- React: Writing Markup with JSX ↗
- React: JavaScript in JSX with Curly Braces ↗
- React: Passing Props to a Component ↗
- React: Conditional Rendering ↗
- React: Responding to Events ↗
- React: State: A Component’s Memory ↗
- React: State as a Snapshot ↗
- React: Queueing a Series of State Updates ↗
- React: Updating Objects in State ↗
- React: Updating Arrays in State ↗
- React: Rendering Lists ↗
- React DOM: input ↗
- React: Sharing State Between Components ↗
- React: You Might Not Need an Effect ↗
- React: Synchronizing with Effects ↗
- React: useEffect ↗
- React: Referencing Values with Refs ↗
- React: Manipulating the DOM with Refs ↗
- React: Passing Data Deeply with Context ↗
- React: Extracting State Logic into a Reducer ↗
- React: Keeping Components Pure ↗
- React: StrictMode ↗
- React: act ↗
- Testing Library: React Testing Library ↗
- Testing Library: user-event Introduction ↗
- Vitest: Getting Started ↗
- Vitest: environment ↗
- Next.js: Server and Client Components ↗
- React: useState ↗
- React: useReducer ↗