# laravel react 連携

# セットアップ

# react インストール

php artisan ui react --auth
npm install && npm run dev
npm install react-router-dom styled-components redux react-redux

TIP

# ※参考：blade/SSR メインでの実装の場合

（bootstrap 内 jquery が入ってる）

php artisan ui bootstrap --auth
npm install && npm run dev

# プログラム追加修正

# エントリーポイントとなる index.html 用の php を作成

vi resources/views/app.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" />
    <meta name="csrf-token" content="{{ csrf_token() }}" />

    <title>{{ config('app.name', 'Laravel') }}</title>

    <script src="{{ asset('js/app.js') }}" defer></script>

    <link rel="dns-prefetch" href="//fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css?family=Nunito"
      rel="stylesheet"
    />
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

# app.js 内の読み込み先を変更

vi resources/js/app.js

// require('./components/Example');
require("./AppEntry");

# ルーティング追加

vi routes/web.php

Route::get('/app', function () {
    return view('app');
});

# javascript のエントリーポイント作成

vi resources/js/AppEntry.js

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return <h1>react</h1>;
}

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

# 既存 php の修正（app.js が被って正常に動かなくなる為）

vi resources/views/layouts/app.blade.php

<script src="{{ asset('js/app.js') }}" defer></script>
↓
<!-- <script src="{{ asset('js/app.js') }}" defer></script> -->

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
↓
<!-- <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> -->
※対応する</div>もコメントアウトする

# storage ディレクトリのパーミッション追加

chmod -R 777 storage

# デバッグビルド

npm run watch-poll

# （参考）コントローラ/ルーティング/view の追加基本例

# app\Http\Controllers 配下にコントローラファイル作成

vi app/Http/Controllers/TestController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{
    //get
    public function testGet(Request $request)
    {
        $reqdata = $request->all();
        $resdata = $reqdata;

        return view('test')->with(['reqdata' => $reqdata,'resdata' => $resdata]);
    }

    //post
    public function testPost(Request $request)
    {
        $reqdata = $request->all();
        $resdata = $reqdata;

        return response()->json(['reqdata' => $reqdata, 'resdata' => $resdata]);
    }
}

# ルーティング追加

vi routes/web.php

//書式は(url , コントローラクラス名@クラス内のメソッド名)

//get
Route::get('/test', 'TestController@testGet');

//post
Route::post('/test', 'TestController@testPost');

# view となる php ファイルを作成

vi resources/views/test.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" />

    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>{{ config('app.name', 'Laravel') }}</title>
  </head>
  <body>
    test
  </body>
</html>

手順一覧