初心者向け React は、関数コンポーネントでブラウザ UI を構築する 9 ラボの入門コースです。Vite プロジェクトから始め、JSX の編集、コンポーネントの合成、データの受け渡し、ローカル状態、ボタン、動的リスト、条件付き表示、フォームを学びます。
各ガイド付きラボは一つの概念に集中します。開発サーバーを起動し、内蔵ブラウザで変更を確認しながら、小さなコード修正を通してコンポーネント中心の流れを理解します。
学習内容
- Vite React プロジェクトを調べ、依存関係をインストールして開発サーバーを実行する
- 関数コンポーネントを作成、エクスポート、インポート、合成する
- 式、属性、自己終了要素、Fragment を使って JSX を書く
- props、分割代入、デフォルト値で親から子へ値を渡す
useStateHook でローカル状態と更新を管理する- イベントハンドラを設定し、イベントオブジェクトを調べ、既定動作を防止する
- 三項演算子、論理演算子、変数、状態で条件付きレンダリングを行う
- 配列を key 付き要素へ変換し、制御された入力とフォーム送信を作る
このコースの対象者
JavaScript の基礎を理解し、現代的な関数コンポーネントをガイド付きで学びたい React 初心者向けです。より大きなアプリの前に JSX、props、状態、イベントの連携を理解したいフロントエンド初心者にも適しています。
前提知識： 関数、変数、配列、オブジェクト、import、配列の map など JavaScript の基礎を推奨します。HTML 要素と属性の知識が役立ちます。React や Vite の経験は不要です。
学習環境： 9 ラボすべて、Node.js、npm、エディタ、ターミナル、Web 8080 プレビューを備えた Ubuntu 22.04 React WebIDE で実行します。Vite React プロジェクトのサーバーを起動し、ホット更新を確認します。
よくある質問
完成した React アプリを一つ構築しますか？
いいえ。コンポーネント、カウンター、条件付き表示、リスト、制御されたフォームなどの焦点を絞った例を作ります。中核の仕組みを学びますが、累積型の最終アプリはありません。
関数コンポーネントとクラスコンポーネントのどちらを使いますか？
関数コンポーネントと useState Hook を使います。クラスコンポーネントとライフサイクルメソッドは扱いません。
ルーティング、API、高度な Hook も扱いますか？
いいえ。React Router、データ取得、useEffect、Context、カスタム Hook、TypeScript、テスト、状態管理ライブラリ、デプロイは対象外です。
自分の PC に React をインストールする必要がありますか？
いいえ。各ラボが WebIDE に Vite React プロジェクトを用意します。npm と開発サーバーは提供環境内で使うため、ローカル設定は不要です。
