概要
Laravelプロジェクトにおいて、他の画面と同様のヘッダー等を引き継ぎつつ、それ以外の部分について、一部の画面を React＋TypeScript で実装する時の環境構築についてまとめておきます。
手順
- React側画面のエントリーポイントを作成
＜例＞
resources/ts/app.tsx
import { ChakraProvider } from "@chakra-ui/react";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import TopPage from "./pages/Top";
import ReactDOM from 'react-dom';
import { createRoot } from "react-dom/client";
/// React側のルーティングを設定するコンポーネント
const App: React.FC = () => {
return (
<ChakraProvider>
<BrowserRouter>
<Routes>
<Route path="/react" element={<TopPage />} />
</Routes>
</BrowserRouter>
</ChakraProvider>
);
};
export default App;
if (document.getElementById("app")) {
const rootElement = document.getElementById("app") as HTMLElement;
const root = createRoot(rootElement);
root.render(<App />);
}
- webpack.mix.js で app.tsx を app.js にビルド
webpack.mix.js
const mix = require("laravel-mix");
mix.ts("resources/ts/app.tsx", "assets/js")
- Bladeテンプレートで、フロントエンドのReactアプリケーションをLaravelプロジェクトに組み込むため、以下を追加
top.blade.php
<div id="app"></div>
<script src="{{ asset(mix('/assets/js/app.js')) }}"></script>
備考
もし、Reactで実装したいページが複数ある場合は、そのページ分Bladeテンプレートを用意し、Reactのエントリーポイント（app.tsx）に Routes を追加しつつ、上記の通りscriptタグの設定をすると良いです。