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
readouble.com
ソースを書き換えていく
ここからソースを書き換えていきます。
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
ブラウザで確認
次のように表示されていれば成功です！
お疲れ様でした！！
コメント