使用Laravel（版本10）+ React + TypeScript构建单页应用
我将介绍在Laravel（版本10）中使用TypeScript编写React前端的环境搭建方法，同时也作为备忘录。
Laravel的安装
首先，在终端中切换到要创建项目的目录，并进行Laravel的安装。
$ composer create-project laravel/laravel (プロジェクト名)
安装React(TypeScript)所需的模块。
一旦创建了 Laravel 项目后，切换到项目文件夹并开始安装 React。
安装用于管理Node.js包的npm。
npm install
安装TypeScript的React
npm install -D react react-dom @types/react @types/react-dom
为了在Vite中使用React，需要安装@vitejs/plugin-react插件。
npm install -D @vitejs/plugin-react
安装TypeScript
npm install -D typescript
创建用于React类型Script的设置文件（tsconfig.json）
npx tsc --init --jsx react-jsx
Vite的设置
在创建laravel项目时，会生成一个名为vite.config.js的文件。
将该文件的扩展名从”.js”更改为”.ts”，成为vite.config.ts。
然后，将其内容修改如下：
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css',
//↓削除
//'resources/js/app.js',
//↓追加
'resources/ts/app.ts'],
refresh: true,
}),
],
});
TypeScript 视图显示实现
请在资源目录中新建名为”ts”的文件夹。
在该文件夹中创建名为index.tsx的文件，并按照以下内容进行编辑。
import React from 'react';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container!);
root.render(
<>
<div>
Hello, world!
</div>
</>
);
接下来，在resource目录下的views目录中创建一个名为index.balde.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+TypeScript</title>
@viteReactRefresh
@vite([
'resources/css/app.css',
'resources/ts/index.tsx',
])
</head>
<body>
<div id="app"></div>
</body>
</html>
将routes文件夹中的web.php文件重写如下。
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('{any}', function () {
return view('index');
})->where('any','.*');
在本地启动服务器并进行确认。
再打开一个终端并移动到项目的目录。
如果使用VScode，则可以使用VScode的终端。
在其中的一个终端中
php artisan serve
在另一个终端中
npm run dev
进行路由测试
实现页面切换。
安装React Router以进行路由设置。
此外，本次使用的版本是ver.6（虽然互联网上的信息更多是关于ver.5的，但代码写法与ver.6不同，用ver.5的写法无法正常运行）。
npm i -D react-router-dom @types/react-router-dom
创建切换页面（组件）。
这次我们创建Nav、Home和About这三个组件。
在ts目录下创建Nav.tsx、Home.tsx和About.tsx，并编辑如下。
import { FC } from "react"
import { Link } from 'react-router-dom';
export const Nav: FC = () => {
return (
<header>
<h1>Nav</h1>
<ul>
<li><Link to="home">Home</Link></li>
<li><Link to="about">About</Link></li>
</ul>
</header>
)
}
import { FC } from "react"
export const Home: FC = () => {
return (
<div >
<h1>Home</h1>
<p>Homemコンポーネントです。</p>
</div>
)
}
import { FC } from "react"
export const About: FC = () => {
return (
<div >
<h1>About</h1>
<p>Aboutコンポーネントです。</p>
</div>
)
}
接下来，将index.tsx文件的内容改写如下：
import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Nav } from './Nav';
import { Home } from './Home';
import { About } from './About';
const container = document.getElementById('app');
const root = createRoot(container!);
root.render(
<React.StrictMode>
<BrowserRouter>
<Nav />
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
任务已经完成。
