Laravel8 | Reactを利用できる環境構築

laravel/ui
react
npm install
1. Example.js
各ファイルの変更
1. ap.js
2. bladeファイル
参考サイト

laravel/ui

$ composer.phar require laravel/ui

1	$ composer.phar require laravel/ui

必要に応じて環境に合ったバージョンを指定します。

$ composer.phar require laravel/ui:^3.4

1	$ composer.phar require laravel/ui:^3.4

react

$ php artisan ui react

React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

$ php artisan ui react

React scaffolding installed successfully.

Please run "npm install && npm run dev" to compile your fresh scaffolding.

npm install

[hoge@sample]$ npm install
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 756 packages, and audited 757 packages in 27s

77 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 8.19.1 -> 9.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2
npm notice Run npm install -g npm@9.1.2 to update!
npm notice

[hoge@sample]$ npm install

npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 756 packages, and audited 757 packages in 27s

77 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

npm notice

npm notice New major version of npm available! 8.19.1 -> 9.1.2

npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2

npm notice Run npm install -g npm@9.1.2 to update!

npm notice

Example.js

上記のコマンドを実行すると、下記の場所にファイルが出来ています。

components/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">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

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