LaravelでReactを利用する方法を解説したいと思います。
本記事のゴールは画面上にHellow worldを表示するです。
Laravelのインストール
まずはじめにLaravelをインストールします。
以下の記事を参考にインストールしてください。
すでにインストール済の方は次に進んでください。
LaravelとReactの連携
LaravelではReactに限らず、フロントエンドパッケージをインストールするためにnpmを使用します。
Laravelが提供するフロントエンドのスカフォールドは、Composerを使いインストールするlaravel/uiパッケージに用意してあります。
スカフォールドとは、アプリケーションの雛形を自動で生成してくれるものです。
スカフォールドを利用することで効率良く開発を進めることができます!!
それでは早速取り掛かりましょう。
まずは以下のコマンドを実行してください。
composer require laravel/ui:^1.0
その後
php artisan ui react
resources直下にいろいろと生成されたと思います。
resources/js/app.js | bootstrap.jsとExample.jsを呼び出している | |
resources/js/bootstrap.js | jqueyとBootstrap、非同期通信するためのライブラリのロード | |
resources/js/components/Example.js | コンポーネントの例。こいつが実際に画面に表示される |
公式サイトは以下になります。
JavaScriptとCSSスカフォールド 6.x Laravel
ソースを書き換えていく
ここからソースを書き換えていきます。
viewからreactのコンポーネント(Example.js)を呼ぶように書き換えます。
resources/views/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> </head> <body> <div id="Example"></div> </body> </html>
次にExample.jsを次のように書き換えてください。
import React from 'react'; import ReactDOM from 'react-dom'; function Example() { return ( <div className="container"> <div className="row justify-content-center"> <div className="col-md-8"> <div className="card"> <center>Hellow World</center> //ここを書き換えたよ! </div> </div> </div> </div> ); } export default Example; if (document.getElementById('example')) { ReactDOM.render(<Example />, document.getElementById('example')); }
JSファイルのコンパイル
npmをインストールしましょう
npm install
次にコンパイルしましょう!
npm run dev
ブラウザで確認
次のように表示されていれば成功です!

お疲れ様でした!!