React · LEARN AT YOUR OWN PACE今日も、一歩ずつ。

ABOUT THIS LEARNING NOTE

React教材と出典

コードを試す前に

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。最新の仕様は公式資料で確認してください。