0Pricing
React Academy · レッスン

プロジェクトのセットアップ：Vite、レイアウト、開発サーバー

Vite（または同様のツール）でReactアプリを作成し、基本的なフォルダー構成を理解し、開発サーバーを起動し、小さなコンポーネントでレンダリングを確認します。

「プロジェクトのセットアップ：Vite、レイアウト、開発サーバー」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。

セットアップの概要

目標: プロジェクトをすばやく作成し、フォルダ構成を理解して、ホットリロード対応の開発サーバーを起動します。

  • Vite（または同様のツール）でプロジェクトを初期化します
  • ファイルの配置場所を確認します
  • アプリを起動して動作を確認します

前提条件

前提条件:

  • Node.js LTS と npm がインストール済みであること
  • ターミナルにアクセスできること
  • 基本的な CLI 操作（cd、ls）ができること

Vite でプロジェクトを作成

高速なツールでプロジェクトを作成します:

  • 雛形を作成します（例: npm create vite@latest）
  • React（JavaScript）を選択します
  • 依存関係をインストールします（npm install）

フォルダ構成の基本

構成（一般的な例）:

  • index.html: div#root が含まれます
  • src/main.jsx: root を作成して App をレンダリングします
  • src/App.jsx: コンポーネントを定義します

開発サーバーを起動

開発サーバー:

  • npm run dev で起動します
  • ローカル URL を開きます
  • App.jsx を編集すると、変更がすぐに表示されます（ホットリロード）

レンダリングの確認

小さな App をレンダリングしてセットアップが機能することを確認します。テキストを変更してホットリロードを確認します。


<div id="root"></div>

マウント先のファイル

Vite の React アプリでは、通常どのファイルに
</>CoddyKit
要素が含まれていますか？

まとめ

まとめ: Vite で雛形を作成し、index.html、main.jsx、App.jsx の配置場所を確認して、開発サーバーを起動します。小さなコンポーネントでレンダリングを確認します。

よくある質問

「プロジェクトのセットアップ：Vite、レイアウト、開発サーバー」レッスンは無料ですか？

はい。「プロジェクトのセットアップ：Vite、レイアウト、開発サーバー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。

「プロジェクトのセットアップ：Vite、レイアウト、開発サーバー」で何を学びますか？

Vite（または同様のツール）でReactアプリを作成し、基本的なフォルダー構成を理解し、開発サーバーを起動し、小さなコンポーネントでレンダリングを確認します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「プロジェクトのセットアップ：Vite、レイアウト、開発サーバー」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. React入門：概念とセットアップ
  2. プロジェクトのセットアップ：Vite、レイアウト、開発サーバー
  3. 最初のコンポーネントとレンダリング
← React Academyに戻る