LaravelにReactとTypeScriptを導入する #PHP

前提

Laravelでプロジェクトを作成していて、nodeはインストール済みの想定で進めていきます。

TypeScriptをインストールする

webpack.mix.js（webpackのラッパーライブラリ）を下記のように編集する

mix.ts('resources/ts/index.tsx', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

先ほどの編集内容を反映させる

npm install

プロジェクト内にnode_modulesディレクトリが作成されていればOK。
一旦下記コマンドでビルドする。

npm run prod

package.jsonにwebpack.mix.jsで編集した内容の不足分が記載される（typescriptとsass）

Reactをインストールする

npm i -D react react-dom @types/react @types/react-dom
npm install

package.jsonに追記されているか確認する。

React用のTypeScriptの設定ファイルを作成する

tsc --init --jsx react

すると...
tsconfig.jsonが作成される。

動作確認

①webpack.mix.jsに記載した下記を作成する。
■resources/ts/index.tsx

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <h1>Laravel SPA</h1>
  )
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)

■resources/sass/app.scss
→resources/css/app.cssをリネームする

②下記コマンドでビルドする

npm run prod

③resources/views/welcome.blade.phpをresources/views/index.blade.phpへリネームする
下記のように書き直す

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script src="{{ mix('/js/index.js') }}"></script>
</html>

④web.phpでrouteをwelcomeからindexへ変更する

⑤キャッシュ対策でファイルパスにパラメーターを付与する
webpack.mix.jsに下記を追記する

if (mix.inProduction()) {
    mix.version()
}

⑥ビルトインサーバーを起動してlocalhost:8000へアクセスする

php artisan serve

編集した内容が表示されていることを確認できました！