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

環境
事前準備
Reactをインストール
ルーティング設定(バックエンド側)
1. app.blade.phpを修正
2. web.phpを修正
Reactの初期設定
ルーティング設定(フロントエンド側)
Laravel学習におすすめの書籍
PHP学習におすすめの書籍
React学習におすすめの書籍

環境

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の開発環境を準備します。
※Laravel8の環境構築がまだの方は以下の記事をご参照ください。

Docker・Laravel8・PHP8・Nginx・MySQLを用いて開発環境を爆速で構築する

WEBアプリをモダンかつ効率的に開発するための環境をDocker・Laravel8・PHP8・Nginx・MySQLを用いて構築する方法について解説しています。Dockerを用いることでかなりの速さで環境構築を行うことができ、ポートフォリオに組み込むことで企業の採用担当者からも好印象を持たれる可能性が高くなります。

Reactをインストール

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

composer require laravel/ui

Reactの導入

php artisan ui react --auth

ビルド

npm install

npm run dev

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

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

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

app.blade.phpを修正

<divid=“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"));
}

ビルド