Laravel×Reactの開発環境構築

Laravel×Reactの開発環境構築を構築します。

今回試した環境は以下の通りです。

• Laravel 6.20.44
• Node.js 14.16.1
• React 18.1

Laravelはインストール済みの状態から解説します。

初期LaravelにReactのインストール

初期のLaravel環境に対してReactをインストール場合、laravel/uiパッケージを利用すると便利です。ターミナルから以下のコマンドを実行します。

$ php artisan ui react

または

$ php artisan preset react

Laravelの初期状態はVue.jsがプリセットとなっています。
このコマンドを実行する事で、プリセットがReactに変更され、React開発スタートに必要なファイルが追加、変更されます。
具体的には「resources/js/components/Example.js」などが追加され、「package.json」や「webpack.min.js」などの内容が変更されます。
一方で「resources/js/components/ExampleComponent.vue」などのVue.js関連の初期ファイルは削除されます。

次に「package.json」を元にReactパッケージをインストールします。

$ npm install

基本的にReactのインストールは以上です。

但し、既にLaravelの開発が進行している場合、既存ファイルが自動で変更、削除されると困という場合はこちらの方法はお勧めできません。

開発中LaravelにReactのインストール

既にLaravelの開発が進んでる中、laravel/uiパッケージを使用せずに手動でReactをインストールする方法です。
以下のコマンドでReactパッケージをインストールします。

$ npm install -D @babel/preset-react react react-dom

Vue.jsが必要ない場合はアンインストールします。

$ npm uninstall -D vue-template-compiler

以上です。

React動作確認

Reactの動作を確認します。まず、コンポーネントファイル「resources/js/components/Example.js」を用意します。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Example extends Component {
	render() {
		return (
			<h1>Hello World!</h1>
		);
	}
}

if (document.getElementById('example')) {
	ReactDOM.render(<Example />, document.getElementById('example'));
}

ビルドするjsファイル「resources/js/components/app.js」にコンポーネントを組み込みます。

require('./components/Example');

ビューテンプレートにコンポーネント用のタグを追加します。

<div id="example"></div>

ここまで用意できたらビルドします。

$ npm run dev

ブラウザからアクセスして、ターゲットのタグに「Hello World!」と表示されたら環境構築成功です。

ビルド時のエラー

私の場合、ビルドの際に以下のエラーが発生しました。

$ npm run dev
（中略）
ERROR in ./resources/js/components/Example.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/user/laravel/resources/js/components/Example.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:13):

jsxを使用するにあたり、設定が足りてない旨のメッセージが表示されています。
これを回避するためにファイル「.babelrc」を用意して、以下の内容を追記します。

{
	"presets": ["@babel/preset-env", "@babel/preset-react"]
}