React環境を構築して起動してみよう

プロジェクトの作成

まずは、モダンな開発に欠かせない高速ビルドツール Vite を作成しましょう。

Viteのセットアップ

Terminalを開き、以下のコマンドを実行します。対話形式でプロジェクト設定が進みます。

COMMANDCopy
# プロジェクト名は「my-router-app」など
npm create vite@latest my-router-app -- --template react

依存関係のインストール

作成されたプロジェクトディレクトリに移動し、必要なNode.jsパッケージをインストールします。

COMMANDCopy
cd my-router-app
npm install

React Routerの導入

次に、本シリーズの主役であるReact Router本体をインストールします。

インストールコマンド

Webアプリケーション向けのコア機能が含まれる react-router-dom を使用します。

COMMANDCopy
npm install react-router-dom

起動確認

準備ができたら、開発サーバーを起動して、初期状態のReactアプリが表示されるか確認しておきましょう。

COMMANDCopy
npm run dev

ブラウザで http://localhost:5173 にアクセスし、ViteとReactのロゴが回転していれば成功です。

プロジェクトのクリーンアップ

学習をスムーズに進めるために、初期状態で生成される不要なサンプルコードを整理しましょう。

ファイルの削除

src/App.css や src/index.css の中身を空にするか、ファイルを削除してください。

App.jsxのシンプル化

src/App.jsx を以下のように最小限の状態に書き換えます。

src/App.jsxCopy
function App() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold text-white">Hello React Router</h1>
      <p className="mt-4 text-slate-400">開発環境の構築が完了しました！</p>
    </div>
  );
}

export default App;

これで、真っ白なキャンバスが用意できました。次章からは、実際にこの環境を使ってルーティングを設定していきます。