この記事ではviteが使われている既存のLaravelプロジェクトにReactを導入する方法を紹介します。
デフォルトのLaravelでは、フロント部分はbladeで実装しています。
そこに、一部分だけReactを導入していきます。
新規にLaravel×Reactのプロジェクトを作成する記事はたくさんありますが、既存のプロジェクトに一部Reactを導入するといったものがあまりなかったのでこういったケースをお求めの方の参考になれば幸いです。
この記事を読むメリット
- viteを使った既存のLaravelプロジェクトにReactを一部分導入できるようになる
- ReactとLaravelの連携方法が理解できる
前提
既存のLaravelプロジェクトが作成済みであることを前提としています。
Laravelプロジェクトの作成とローカル環境の構築について知りたい方は、以下記事を参考にしてください。
Laravel sailを使った超簡単なローカル環境構築方法となっています。
そして今回は、viteが使われているプロジェクトが対象です。
webpackでのLaravelプロジェクトにReactを導入する記事は以下になります。
Reactを部分的に導入する流れ
React導入の全体的な流れは以下のようになります。
- 必要なパッケージのインストール
- viteの設定をReact用に更新する
- Reactコンポーネントの作成
- Reactコンポーネントのエントリーポイントを設定
- 必要な箇所にReactコンポーネントを埋め込む
- ビルドして動作確認
1つずつ実際のコードを交えて紹介していきます。
必要なパッケージのインストール
まずは必要なパッケージをインストールします。
npm install react react-domnpm installが完了すると、package.jsonとpackage.lock.jsonに以下が追加されているはずです。
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}さらにviteのReactプラグインをインストールするために以下コマンドも実行します。
npm install -D @vitejs/plugin-reactこちらはビルドツールで開発時のみ必要なので「-D」オプションをつけます。
インストール完了すると、「“devDependencies”」に「“@vitejs/plugin-react”」が追加されていればオッケーです。
"devDependencies": {
"@vitejs/plugin-react": "^4.3.1",
"axios": "^1.6.4",
"laravel-vite-plugin": "^1.0",
"vite": "^5.0"
},これでパッケージのインストールは完了です。
viteの設定をReact用に更新する
続いてviteの設定をReact用に更新していきます。
「vite.config.js」を以下のように書き換えます。
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react"; // reactをimport
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.jsx"],
refresh: true,
}),
react(), // react用に
],
});
「src/resources/js/app.js」の内容をReact用にpulic配下に出力するために「.react()」を追加しています。
「import react from “@vitejs/plugin-react”;」も忘れず記述します。
Reactコンポーネントの作成
続いてReactコンポーネントを作成していきます。
コンポーネントファイルを「src/resources/js/components/ExampleComponent.jsx」として作成します。
import React from "react";
function ExampleComponent() {
return (
<div>
<h1>Hello, React</h1>
</div>
);
}
export default ExampleComponent;「Hello, React!」と表示されるシンプルなコンポーネントとなっています。
Reactコンポーネントのエントリーポイントを設定
続いて、先ほど作成したコンポーネントファイルのエントリーポイントを設定します。
すでにある「src/resources/js/app.js」の拡張子を「.jsx」に変更し、以下のように修正します。
import React from "react";
import { createRoot } from "react-dom/client";
import ExampleComponent from "./components/ExampleComponent";
const container = document.getElementById("example");
if (container) {
const root = createRoot(container);
root.render(<ExampleComponent />);
}「id=”example”」の要素があれば「<ExampleComponent />」をレンダリングします。
これでエントリーポイントの設定は完了です。
必要な箇所にReactコンポーネントを埋め込む
続いて必要箇所にReactコンポーネントを埋め込みます。
今回は「resources/views/react.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</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
@viteReactRefresh
@vite(['resources/css/app.css', 'resources/js/app.jsx'])
</head>
<body >
<div id="example"></div>
</body>
</html>
対象のidを含む要素「<div id=”example”></div>」を追加しています。
そして「@vite([‘resources/css/app.css’, ‘resources/js/app.jsx’])」でトランスパイルされたjsを読み込むようにします。
「@viteReactRefresh」もviteの際には必ず必要になります。
ビルドして動作確認
最後はきちんと動作するかビルドして確認します。
npm run dev対象のページでReactで作成したコンポーネントが表示されていれば成功です！
エンジニアにおすすめ書籍
エンジニアになりたて、これから勉強を深めていきたいという方におすすめの書籍はこちら！
複数のコンポーネントを作成して読み込ませたい
複数のコンポーネントを作成していきたい場合は、「resources/js/app.jsx」の内容を少し工夫すれば対応できます。
import React from "react";
import { createRoot } from "react-dom/client";
import ExampleComponent from "./components/ExampleComponent";
import AnotherComponent from "./components/AnotherComponent";
// コンポーネントと対応するDOM要素のマッピング
const components = [
{ id: "example", component: ExampleComponent },
{ id: "another", component: AnotherComponent },
// 新しいコンポーネントが必要な場合は追加していく
];
components.forEach(({ id, component }) => {
const container = document.getElementById(id);
if (container) {
const root = createRoot(container);
root.render(React.createElement(component));
}
});これはあくまで一例なので参考程度に。
Laravelの変数をReactで利用したい場合
Laravelの変数をReactのコンポーネント内で利用したい場合もあるかと思います。
その場合は、設定を少し加える必要があります。
以下記事で紹介していますので気になる方は参考にしてみてください。
まとめ
いかがだったでしょうか。
LaravelにReactを一部導入する流れを理解できたかと思います。
こういったケースが必要になるのは以下になるかと思います。
- すでにbladeでフロントを作成している
- フレームワークに全移行するコストがない
- 複雑なフロント表示は一部分で良い
先日紹介したwebpackを使っているLaravelプロジェクトと若干設定方法などに違いがあります。
導入したいプロジェクトがどちらを使っているか確認してぜひお試しください。
