Reactに必要なプラグインをviteを通して入れる
npm install @vitejs/plugin-react --save-dev
reactとdomも入れる
npm install react react-dom --save-dev
reactのフレームワークを入れる
composer require laravel/ui
react本体を入れる
php artisan ui react
Reactでルーティングするためにreact-routeをインストールします。
npm install react-router-dom
ルートを変更する
web.php
Route::get('/', function () {
return view('app');
});
ルーティングはLaravelで行います。
resourc/view/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>SPA</title>
@viteReactRefresh
//↓ここのreactのファイルを読み込む
@vite('resources/js/components/Example.jsx')
</head>
<body>
<div id="app"></div>
</body>
</html>
Example.jsxを修正
resoucrc/js/components/Example.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
function Example() {
return (
<h1>Hello</h1>
);
}
export default Example;
if (document.getElementById('app')) {
const Index = ReactDOM.createRoot(document.getElementById("app"));
Index.render(
<React.StrictMode>
<Example/>
</React.StrictMode>
)
}
以上の設定でlocalhost:8000 でreactのExampleページで出てきます。
色々と説明をはしょってすいません。