🌊

Laravel＋Reactでアプリを作成してみる

に公開
Laravel
React
Vite
tech

Laravelプロジェクトを作成

composer create-project --prefer-dist laravel/laravel hogehoge

LaravelでReactのセットアップ

  1. 下記のコマンドを実行し、React、TypeScript、Viteをインストール
cd hogehoge
composer require laravel/ui
php artisan ui react
npm install react react-dom typescript @types/react @types/react-dom @vitejs/plugin-react vite vite-tsconfig-paths --save-dev
  1. プロジェクトのルートディレクトリにtsconfig.jsonファイルを作成
{
    "compilerOptions": {
        "target": "es2016",
        "lib": ["dom", "es2016"],
        "allowJs": true,
        "jsx": "react",
        "module": "es6",
        "moduleResolution": "node",
        "strict": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"]
        }
    },
    "include": ["resources/js/**/*"]
}
  1. プロジェクトのルートディレクトリに vite.config.js ファイルを作成
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.tsx'],
            refresh: true,
        }),
        react(),
        tsconfigPaths(),
    ],
});
  1. 既存のReactファイルの拡張子を.jsxから.tsxに変更
  2. Bladeテンプレートの設定
<!DOCTYPE html>
<html>
<head>
<title>hogehoge</title>
</head>
<body> <div id="app"></div>
@vite('resources/js/app.tsx')
</body>
</html>

Viteとは？

  • Laravelのバージョン9.18以降のデフォルトビルドツール
  • フランス語で「ヴィート」と読むらしい
  • create-projectするとプロジェクトのルートディレクトリにvite.config.jsという設定ファイルがデフォルトで入る
  • https://ja.vite.dev/

関連記事

https://zenn.dev/mof_moriko/articles/ac101fc27bc068

Discussion