環境や条件など

・mac
・PHP ver8
・Laravel ver10

Laravelのインストール

下記のコマンドでLaravelプロジェクトを作成する。

zsh

$ composer create-project laravel/laravel (プロジェクト名)

プロジェクト作成が完了したら、プロジェクトのディレクトリに移動した状態で
下記コマンドでローカルサーバーを立ち上げて動くかテストしてみる。

zsh

$ php artisan serve

ターミナルに、URLが出るのでここにアクセス。
下記のような画面が表示されればOK。

Reactのインストール

Reactを使用できるように下記コマンドで、laravel/uiをインストールする。

zsh

$ composer require laravel/ui

composer installもしておく

zsh

$ composer install

続いて、Reactを使用するように下記コマンドで設定。

zsh

$ php artisan ui react

必要なパッケージのインストール。

zsh

$ npm install

※自分の環境では、npm installでエラーが発生した。
オプションを付けて、"npm install --legacy-peer-deps"にて実行すると成功した。

プロジェクトのビルド。

zsh

$ npm run dev

npm run devを実行した後、ターミナルが開発モードに入るので
いったんキーボードより'control'+'c'で抜ける。

Viteの設定

Laravel9のバージョン9.2からデフォルトのビルドツールがWebpack(Laravel Mix)から
Viteに変更になっているので、設定をしていく。
まずViteでReactを利用するために@vitejs/plugin-reactのインストールする。

zsh

npm install @vitejs/plugin-react --save-dev

※自分の環境ではエラー出たので、
npm install @vitejs/plugin-react --legacy-peer-depsにて実行。

vite.config.jsを開き、編集する。

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                //'resources/js/app.js',
                  'resources/js/app.jsx', //←.jsから.jsxに変更
            ],
            refresh: true,
        }),
        react(),
    ],
});

また、"resources"ディレクトリ>"js"ディレクトリのapp.jsの拡張子をapp.jsxに変更する。
設定が完了したらnpm run devコマンドを実行する。

zsh

$ npm run dev

Reactでのフロントエンド実装確認

ここまでできたら、app.jsxファイルにReactのコードを記述する。

app.jsx

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

import './bootstrap';

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

import './components/Example';
import ReactDOM from "react-dom/client";
import { render } from 'react-dom';

function App() {
    return <h1>Hello World</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);

このAppコンポーネントを表示できるようにする。
下記のコードの部分に注目する。

app.jsx

const root = ReactDOM.createRoot(document.getElementById("app"));

"document.getElementById("app")"の部分でHTMLタグのid名で'app'をターゲットにして、
appというid名をもつタグの中にコンポーネントをjsで描画するイメージ。
bladeのビューを作成し、その中にid名appをもつタグを書けば、Appコンポーネントを表示できる。
"resource"ディレクトリ>"views"ディレクトリの中に追加でbladeビューを作成する。
(デフォルトでwelcome.blade.phpというビューが用意されているがいじらずそそままにしておく。)
app.balde.phpという名前で"views"ディレクトリにファイルを追加する。
そして、下記のようにコードを書く。

app.balde.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @viteReactRefresh
    @vite(['resources/css/app.css', 'resources/js/app.jsx'])
    <title>APP</title>
</head>
    <body>
        <div id="app"></div>
    </body>
</html>

中身は非常にシンプルで、htmlの枠組みにdivタグが一つあるだけ。
このdivタグはidにappが付与されている。このdivの中にAppコンポーネントが追記される。

続いて、"route"ディレクトリの中のweb.phpを下記のように編集する。

web.php

// ↓もとから書かれてたコード。削除かコメントアウトする。
// Route::get('/', function () {
//     return view('welcome');
// });

// 追記
Route::get('{any}', function () {
    return view('app');
})->where('any','.*');

{any}でどんなURLのアクセスがきても、app.balde.phpを返すようになっている。
SPAはページをそれぞれ作って画面遷移するのではなく一つのページをjsで書き換えて
あたかも画面遷移しているように見せている。

では、ローカルサーバーをphp arisan serveで立ち上げて、
http://127.0.0.1:8000にアクセスする。

Appコンポーネントで"Hello World"が表示できた。

ここまでで、Laravel(ver.10)でReactの導入ができた。

React Routerの導入

Raect Routerをインストールする。
普通にnpm install react-router-domでインストールしようとしたら、
ライブラリの依存関係でエラーが出てインストールできないため、オプションで"--legacy-peer-deps"
をつけてインストールした。

ターミナル

npm install react-router-dom --legacy-peer-deps

ちなみに、バージョンはv6でインストールしている。

コンポーネントを作成し、ルーティングを試す

resources > js > componentsディレクトリにコンポーネントを作って
ページの切り替え(表示するコンポーネントの切り替え)をできるようにする。

コンポーネント作成

componentsディレクトリに下記のコンポーネントを作成する。

NavBarコンポーネント(NavBar.jsx)
Homeコンポーネント(Home.jsx)
Aboutコンポーネント(About.jsx)

NavBar.jsx

import React from 'react';
import { NavLink } from 'react-router-dom';

function NavBar(){
    return(
        <div>
            <h1>NavBar</h1>
            <NavLink to="/about" activeClassName="active">About</NavLink>
            <NavLink to="/home" activeClassName="active">Home</NavLink>
        </div>
    );
}

export default NavBar;

Home.jsx

import React from 'react';


function Home(){
    return(
        <div>
            <h1>Home</h1>
            <p>これはHomeコンポーネントです。</p>
        </div>
        
    );
}

export default Home;

About.jsx

import React from 'react';


function About(){
    return(
        <div>
            <h1>About</h1>
            <p>これはAboutコンポーネントです。</p>
        </div>
        
    );
}

export default About;

まずは、先ほどのapp.jsxを以下のように書き換える

app.jsx

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

import './bootstrap';

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

import './components/Example';
+ import NavBar from './components/NavBar'; //追加(外部からインポート)
+ import Home from './components/Home'; //追加(外部からインポート)
+ import About from './components/About'; //追加(外部からインポート)
import ReactDOM from "react-dom/client";
import { render } from 'react-dom';
+ import { BrowserRouter, Routes, Route } from 'react-router-dom'; //追加(ルーター読み込み)

- //↓削除
- function App() {
-    return <h1>Hello World</h1>;
- }

const root = ReactDOM.createRoot(document.getElementById("app"));

- root.render(<App />);
+ //render()の<App />を消し、以下のように書き換え
+ root.render(
+   <>
+      <BrowserRouter>
+           <NavBar />
+           <Routes>
+               <Route path="/about" element={<About />} />
+               <Route path="/about" element={<Home />} />
+           </Routes>
+       </BrowserRouter>
+   </>
+ );

ローカルサーバを立ち上げて確認する。

このように、NavBarコンポーネントのみが表示されている。
AboutやHomeのリンクをクリックすると、それぞれのコンポーネントに切り替わる。

例)Homeのリンクを押した時

以上で、Laravel(ver.10)とReactでSPAで環境構築とページ遷移が完了！