Reactの覚書 | ワクガンス

Laravel + React + TypeScript + Inertia 環境構築手順（XAMPP + Bash） 2025年版

基本

Laravelで作成したプロジェクトへcdコマンドで移動、その場所でyarnコマンドとcomposerコマンド、artisanコマンドをいろいろ駆使するだけである。最終的に「yarn dev」コマンドでreactを実行中にし、http://localhost/○○にアクセスして画面が表示されればOKである。

前提：

Laravel プロジェクトが XAMPP 上に作成済み（例: htdocs/react_laravel/dev）
Bash（Git Bash など）使用可
PHP, Composer, Node.js, Yarn インストール済み

① Breeze + React + TypeScript を導入

cd /c/xampp/htdocs/react_laravel/dev
composer require laravel/breeze --dev
php artisan breeze:install react --typescript
yarn install

② Vue関連を削除（もし含まれていた場合）

yarn remove vue @vitejs/plugin-vue

③ React / Inertia / 型定義を追加

yarn add react react-dom
yarn add @inertiajs/inertia @inertiajs/inertia-react
yarn add -D @vitejs/plugin-react @types/react @types/react-dom

④ Vite 設定ファイルを修正（vite.config.ts）

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
  server: {
    host: '127.0.0.1',
    port: 5173,
  },
  plugins: [
    laravel({
      input: ['resources/js/app.tsx'],
      refresh: true,
    }),
    react(),
  ],
});

⑤ .env にホストを追記

VITE_DEV_SERVER_HOST=127.0.0.1

⑥ app.tsx を作成

// resources/js/app.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/inertia-react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
  resolve: (name) =>
    resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

⑦ Bladeレイアウトを確認（resources/views/app.blade.php）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My App</title>
  @viteReactRefresh
  @vite(['resources/js/app.tsx'])
</head>
<body>
  @inertia
</body>
</html>

⑧ Helloページを作成

// resources/js/Pages/Hello.tsx
import React from 'react';
export default function Hello() {
  return <h1>Hello, World!</h1>;
}

⑨ ルート定義（routes/web.php）

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/hello', function () {
  return Inertia::render('Hello');
});

⑩ マイグレーション（必要に応じて）

php artisan migrate

⑪ Vite を起動

yarn dev

⑫ ブラウザで表示確認

http://localhost/react_laravel/dev/public/hello にアクセスして Hello, World! が表示されれば成功 🎉

💡 よくあるエラーと対処法

エラー	原因	対処
Class "Inertia\Inertia" not found	Inertia Laravelが未インストール	`composer require inertiajs/inertia-laravel`
View [app] not found	`app.blade.php` がない	手動で作成
Vite manifest not found	Viteビルド未実行	`yarn dev`
@inertiajs/inertia-react not found	依存パッケージ未導入	`yarn add @inertiajs/inertia @inertiajs/inertia-react`
GET http://[::1]:5173/〜	IPv6経由で接続できない	`.env` に `VITE_DEV_SERVER_HOST=127.0.0.1` を追加

2025-3-25

React+TypeScriptの覚書 | ワクガンス

Laravel + React + TypeScript + Inertia 環境構築手順（XAMPP + Bash） 2025年版

① Breeze + React + TypeScript を導入

② Vue関連を削除（もし含まれていた場合）

③ React / Inertia / 型定義を追加

④ Vite 設定ファイルを修正（vite.config.ts）

⑤ .env にホストを追記

⑥ app.tsx を作成

⑦ Bladeレイアウトを確認（resources/views/app.blade.php）

⑧ Helloページを作成

⑨ ルート定義（routes/web.php）

⑩ マイグレーション（必要に応じて）

⑪ Vite を起動

⑫ ブラウザで表示確認

💡 よくあるエラーと対処法

xxx

React+TypeScriptの覚書 | ワクガンス

Laravel + React + TypeScript + Inertia 環境構築手順（XAMPP + Bash） 2025年版

① Breeze + React + TypeScript を導入

② Vue関連を削除（もし含まれていた場合）

③ React / Inertia / 型定義 を追加

④ Vite 設定ファイルを修正（vite.config.ts）

⑤ .env にホストを追記

⑥ app.tsx を作成

⑦ Bladeレイアウトを確認（resources/views/app.blade.php）

⑧ Helloページを作成

⑨ ルート定義（routes/web.php）

⑩ マイグレーション（必要に応じて）

⑪ Vite を起動

⑫ ブラウザで表示確認

💡 よくあるエラーと対処法

xxx

③ React / Inertia / 型定義を追加