laravelとReactの連携方法の手順
1. Laravelプロジェクトの作成
まず、新しいLaravelプロジェクトを作成します。
composer create-project --prefer-dist laravel/laravel example-app
cd example-app
2. Laravel UIパッケージのインストール
Laravel UIパッケージをインストールし、Reactを設定します。
composer require laravel/ui
php artisan ui react --auth
npm install
npm run dev
3. Reactコンポーネントの作成
Reactコンポーネントを作成します。例えば、resources/js/components/Example.js に以下のように記述します
import React from 'react';
function Example() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default Example;
4. Laravel Mixの設定
Laravel Mixの設定を行います。webpack.mix.js ファイルを開き、以下のように設定します。
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.react()
.sass('resources/sass/app.scss', 'public/css');
5. Bladeテンプレートの更新
BladeテンプレートにReactコンポーネントをレンダリングするための設定を行います。例えば、resources/views/app.blade.php に以下のように記述します。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel & React</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>
6. Reactコンポーネントのレンダリング
最後に、Example.js コンポーネントをapp.blade.php にレンダリングするように設定します。
if (document.getElementById('app')) {
ReactDOM.render(<Example />, document.getElementById('app'));
}
これでLaravelとReactの連携が完了しました。これで、LaravelのバックエンドとReactのフロントエンドが統合され、シングルページアプリケーションを構築する準備が整いました