Laravel8・ReactでSPA開発をしてみる (環境構築編)

環境

• windows10
• DockerDesktop for Win 3.5.x
• Laravel 8.x
• PHP 8.x
• node 14.17.4 or 16.13.1
• npm 6.14.14 or 8.1.2
• React 17.0.1
• VsCode
• gitbash 2.32.0.1

事前準備

あらかじめ、Dockerを使用してLaravel8の開発環境を準備しておいてください。

Reactをインストール

ワーキングディレトリに移動
uiパッケージのインストール

composer require laravel/ui

Reactの導入

php artisan ui react --auth

ビルド

npm install

npm run dev

localhost:8000を確認
ログイン画面が表示されていれば成功です

ルーティング設定(バックエンド側)

SPAはクライアントサイドルーティングなので、Laravel側の不要なルーティング関連のファイルを削除等します。

app.blade.phpを修正

<div id="app">の中身を全削除

<div id="app">

</div>

web.phpを修正

web.phpを修正して、どんなURLでもapp.blade.phpを返すようにします。

Route::get('{any}', function () {
  return view('layouts.app');
})->where('any','.*');

Reactの初期設定

resources/js/app.jsに初期設定を記述

require('./bootstrap');

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './components/Example';


if (document.getElementById('app')) {
  ReactDOM.render(<Example />, document.getElementById('app'));
}

ここまでで一度ビルド

npm run dev

どのURLに遷移しても、Exampleコンポーネントで設定された内容が表示されていれば成功

ルーティング設定(フロントエンド側)

Reactのルーティングライブラリをインストール

npm install react-router-dom

Aboutページを作成する

import React from 'react';

const About = () => {
  return (
    <div>
      About
    </div>
  );
}export default About;

resources/js/app.jsにルーティング設定を追加

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";
import About from "./About";

const App = () => {
  return (
    <BrowserRouter>
    <Route path="/about" component={About} />
    </BrowserRouter>
  );
};

if (document.getElementById("app")) {
ReactDOM.render(<App />, document.getElementById("app"));
}

ビルド

npm run dev

/about にアクセスし、アバウトページが表示できていれば成功です。

まとめ

いかがでしたでしょうか。本記事では、Dockerとlaravelの開発環境にSPA化のためのReactを導入する手順を説明しています。未経験エンジニア転職にはポートフォリオのSPA化はほぼ必須級になるので、本記事を参考にしてポートフォリオのブラッシュアップをしてみてください。