CakePHP4で、React18を動作させることは可能です。
しかしながら、webpack など、Reactに関連するモジュールをすべて手動で設定していくのは、高度な知識と手間がかかります。
そのため、手軽にReact を利用するために、Laravel Mix を利用する方法があります。
本記事では、この Laravel Mix を利用して、React18のサンプルが動作するまでの手順を説明しています。
ぜひ、参考にしていただければと思います。
Laravel Mixのインストール
下記のコマンドを実行し、Laravel Mix をインストールします。
|
1 |
$ npm i -D laravel-mix |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[hoge@sample]$ npm i laravel-mix 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 735 packages, and audited 736 packages in 50s 74 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New major version of npm available! 8.3.1 -> 9.4.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.4.0 npm notice Run npm install -g npm@9.4.0 to update! npm notice |
React18 インストール
下記のコマンドを実行し、React をインストールします。
|
1 |
npm install react react-dom |
webpack.mix.js
プロジェクトのルート直下にある、webpack.mix.js を編集します。
パスなどは、各環境に合わせたファイルを設定します。
|
1 2 3 4 5 6 7 8 9 |
let mix = require('laravel-mix'); Mix.manifest.refresh = () => {}; mix.setPublicPath('./webroot') .js('resources/js/app.js', 'webroot/js') .react() .sass('webroot/css/main.css') .version(); |
動作確認プログラム
Layout
適当なLayoutファイルを編集します。
ポイントとしては、app.js の読込順を、rootの後に読み込むようにしている部分です。
この順番が違うと、正常に動作しません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <?= $this->Html->charset() ?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> <?= $cakeDescription ?>: <?= $this->fetch('title') ?> </title> <?= $this->Html->meta('icon') ?> <?= $this->Html->css('base.css') ?> <?= $this->fetch('meta') ?> <?= $this->fetch('css') ?> </head> <body> <div id="root" ></div> <script src="/webroot/js/app.js"></script> </body> </html> |
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { createRoot } from 'react-dom/client'; function Sample() { return ( <div> <p>Hello World!</p> </div> ); } const container = document.getElementById('root'); const root = createRoot(container); root.render(<Sample />); |
動作確認
下記のコマンドを実行して、エラーが無ければ、ブラウザでアクセスします。
Hello World! と表示されれば正常に動作しています。
|
1 |
$ npm run build |
