More than 3 years have passed since last update.

Laravel + React(TypeScript)の開発環境を構築する方法～DB接続まで～

Posted at 2021-05-04

##はじめに
この記事では、LaravelとReact(TypeScript)の開発環境構築と、DB接続までできるようになります。
React(TypeScript)環境構築の部分については、下記の動画で紹介されている手順とほぼ同じですが、メモも兼ねてまとめさせていただきました。

LaravelにReact.jsとTypeScriptをインストール：React.js + LaravelでSPA開発講座#08

##開発環境

Windows10
XAMPP
php version 7.4.18
laravel version 8.40.0

##事前準備
以下の項目のインストールが済んでいない場合、下記のサイトを参考にインストールを完了してください。

##環境構築

###Laravelのインストール

任意のフォルダを作成＆フォルダの階層まで移動し、VScodeのターミナルで以下のコマンドを実行

$ composer create-project laravel/laravel example-app "8.*"

作成されたプロジェクトの階層に移動、インストールされたlaravelのバージョンを確認

$ cd example-app
$ php artisan -V

Laravel Framework 8.40.0 と表示されていればOKです。

###ReactとTypeScript のセットアップ
LaravelのプロジェクトでReact(TypeScript)を扱えるようにします。

TypeScriptとSCSSでビルドするように、webpack.mix.jsを以下の様に書き換え ※webpack.mix.jsはexample-appディレクトリ直下に配置されています

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

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

ターミナルでnpm install実行

$ npm install

ビルドを実行

$ npm run prod

Reactのインストール

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

再度npm install

$ npm install

tsconfig.jsonファイルを作成 ※example-appディレクトリ直下に作成される

$ ./node_modules/.bin/tsc --init

tsconfig.jsonファイルの内容を下記に書き換え

tsconfig.json

{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "jsx": "react",
      "strict": true,
      "esModuleInterop": true
  }
}

reourcesディレクトリ直下にtsディレクトリを新しく作成、作成したtsディレクトリ直下にindex.tsxファイルを作成

index.tsxに下記の内容を記載

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ディレクトリ直下のcssディレクトリとapp.cssフォルダの名前と拡張子を変更

変更前

変更後

再度ビルドを実行

$ npm run prod

viewディレクトリ直下のwelcome.blade.phpの内容を下記の様に変更

welcome.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>Laravel</title>
    <link rel="stylesheet" href="/css/app.css">
</head>

<body>
    <div id="app"></div>
</body>
<script src="/js/index.js"></script>

</html>