Reactを使う準備はできた
じゃあExample.jsの描画はどうやるんだ？ということで私的まとめ

環境

laravel 7.28.4

準備

npm run dev

これを実行する理由は以下

ブラウザで確認するためにnpm run watchコマンドを実行しておきます。npm run watchコマンドを実行しておくとファイルを更新するその更新を検知し自動でコンパイルを実行してくれます。
参考：初めてのLaravel6.xとReact入門

ファイルが変更されるたびにビルドをしてくれるってことですな
実行しておきましょう

表示

表示させるコンポーネントはこちら
公式のまま

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'));
}

これを表示するViewを作成

/resources/views/sample.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">
    <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Title</title>
</head>
<body>
<h1>sample</h1>
<div id="example">
    <example-component></example-component>
</div>

<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>

参考：LaravelでVue.jsを使って開発するファーストステップ

Example.jsではdivのid名appに描画するから,
表示用のViewにそのように設置する

後はルーティング

web.php

Route::get('/sample', function () {
    return view('sample');
});

これでlocahost:8000/sampleにアクセスすれば表示がされる

疑問

無意識にlocahost:8000/sampleにアクセスしたから表示されたもののポートの管理はどこでやっているのか
php artisan serveを実行していないのにlocalhost:8000につないだらLaravelのwelcomeページが表示されることからちゃんとルーティングがされているのはなぜか

参考

LaravelでVue.jsを使って開発するファーストステップ

LaravelでExample.jsを表示させてみる

環境

準備

表示

疑問

参考