Lalavel 9 で React を使う環境を整える（mac）

まずはLaravel9をインストール

インストールしたい場所に移動して…

composer create-project laravel/laravel 好きな名前

をコマンドに打ち込むとインストールできます。Laravelをインストールしたら、ViteでReactを利用するために以下のコマンドを打ち込みます。

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

npm install react react-dom --save-dev

詳しく…

Viteとはビルドツールのことでフランス語で「速い」と意味らしく、名前の通り速いのが特徴です。Laravel9からは既存のものと置き換わってこのviteが採用されているみたいです。

UIパッケージ・Reactを導入

フロントエンドのフレームワーク（今回はReact）を使えるように、以下のコマンドを打ってライブラリを入れます。

composer require laravel/ui

そしてReactを導入します

php artisan ui react 

ルートを変更する

Reactは簡単にSPA（シングルページアプリケーション）を作れることに特徴があります。ということでページを一つにするためにresoueces/viwesのなかを編集します。まず、home.balade.php、welcome.blade.phpを削除します。次にlayoutの中のapp.blade.phpをviews直下に移動させて、残ったlayoutフォルダも消してしまいます。これで、layoutの中身はapp.blade.phpのみになりました。ルーティングをReact側で行えるようにroutes/web.phpを以下のように変更します。

routes/web.php

（省略）
Route::get('{any}', function () {
return view('app');
})->where('any','.*');

この記述でどんなルートが来ても同じview(app.blade.phpのこと)を返すようにしています。

Reactでルーティングする

Reactでルーティングするために以下をターミナルに打ち込みます。

npm install react-router-dom

そして、resources/js/componentsにroute.jsxというファイルを作ってください。ここにルーティングをしていきます。

components/route.jsx

import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Example from './components/Example.jsx';
import Yeah from './components/Yeah.jsx';

function App() {


 return (
   <BrowserRouter>
   <Routes>
     <Route path={`/`} element={<Example/>} />
     <Route path={`/yeah`} element={<Yeah />} />
   </Routes>
   </BrowserRouter>
 );
}

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

ルーティングができているかを試すために、Exampleと同じ場所に<Yeah />コンポーネントを試しに作ってみてください。

次にresoueces/js/app.jsの

resoueces/js/app.js

× import './components/Example';

を

resoueces/js/app.js

import './route';

に変更してみてください。
この時点で

npm install
npm run dev
php artisan serve

をしてみてください。パスが’/’の時は<Example/>、’yeah’の時は<Yeah/>が表示されていると思います。

初めての記事であまり上手に書けませんでしたが、皆様の参考になると幸いです。