Laravel chobi

LaravelでReactを試す

はじめに

試しにLaravel+Reactのプロジェクトを作ってみました。

✅環境
Windows/XAMPP/MySQL

✅参考
📚Laravel実践開発

5.8の場合

※書籍のバージョンが5.8なのでまずは5.8から構築していこうと思います。

✅Reactを使うまでの環境構築

①プロジェクト生成

composer create-project laravel/laravel laravel-react --prefer-dist "5.8.*"

②デフォルトではVue.jsがセットされているのでReactに変更

※package.jsonが変更される。

php artisan preset react

変更前

"vue": "^2.5.17"

変更後

"@babel/preset-react": "^7.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",

③パッケージのインストール

npm install

④プロジェクトのビルド

npm run dev

✅Reactコンポーネントの表示

①デフォルトで作られているコンポーネントの確認

resources/js/components/Exaple.js

import React, { Component } from "react";
import ReactDOM from "react-dom";

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">Example Component</div>
                            <div className="card-body">
                                I'm an example component!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

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

app.jsの確認

require('./bootstrap');
require('./components/Example');

webpack.mix.jsの確認

const mix = require('laravel-mix');

mix.react('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css');

🙄コンポーネントがapp.jsで読み込まれて、webpack.mix.jsでコンパイルされているのがわかります。

②resources/views/welcome.blade.phpの編集

※根こそぎ落としました。

<body>
  <h1>Laravel</h1>
    <div id="example"></div>
    <script src="{{asset('/js/app.js')}}"></script>
</body>

③起動して確認

php artisan serve

http://127.0.0.1:8000/へアクセスして確認。

✅試しに関数型コンポーネント

Example.jsを編集

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

export default function Example(){ 
  return (
    <div className="container">
      <div className="row justify-content-center">
        <div className="col-md-8">
          <div className="card">
            <div className="card-header">Example Component</div>
            <div className="card-body">
                I'm an example component!※function
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

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

ビルド

npm run build

起動

php artisan serve

http://127.0.0.1:8000/へアクセスして確認

🙄関数型コンポーネントも問題なしですね！！

6.8の場合

💻初めてのLaravel6.xとReact入門

👆こちらだとlaravel-uiをインストールしてるが、認証機能は一旦切り分けたいので使わずに挑戦。

※5.8と同じ方法で問題なく作れました。

①プロジェクトの作成

composer create-project "laravel/laravel=6.8" laravel-react-6.8

②Reactにデフォルト変更

php artisan preset react

③インストール

npm i

④プロジェクトのビルド

npm run dev

確認

🙄Vueだと6.8でデフォルトでコンポーネントが作成されないと記憶していたのでびっくりしました。

おわりに

割と簡単にReactのテンプレートを表示することができました◎

気が向いたら6.8でも試してみようと思いますが、5.8の方が構築が楽そう。

⇒どちらも特に難しさは変わらずでした。

非同期もVue.jsと同じくクリックイベントなりで発火されるaxios込みの関数を使えばできそうですし、できることは同じですね！

どちらのFWを選ぶかは好みになりそう。

💻Laravel5.7でReactを利用した開発をしてみる

👆これでToDoアプリ制作も面白そう。

💻LaravelでAPIを作成して、Reactで取得したい

こんなのもあった。

💻初めてのLaravel6.xとReact入門

バージョン6以降ならこれ参考になりそう。laravel/uiを使うらしい。

コメントを残す

RECOMMENDこちらの記事も人気です。