LaravelでReactを使いたい

プログラミング自体勉強し始めたばかりなのですが、タイトルの通りLaravelでReactを使いたいと思い調べているのですが、エラーが出て全く進めません。
Laravelがどんな感じで動いているのかなんとなくはわかり始めたのですが、フロントでReactを使うためにどういう書き方をしたらいいのかがわからないため、教えていただけないでしょうか。
まずExample.jsを表示させようとしているのですが、エラーがでてしまい、うまくできません。

Laravel 6 でVue.jsやReactを使う
上記のサイトを参考にLaravel/uiをインストールしてphp artisan ui reactを実行しました。

yarn hotでビルドができるか試したのですが、コンパイルエラーがでてできませんでした。

LaravelにReactを導入する。Vue.js→Reactへスカフォールド切り替え

また、Laravelのバージョンは違いますが、上記も参考にしました。

resoucesディレクトリは以下のようになっています。

resources
├── assets
│ ├── js
│ │ ├── app.js
│ │ ├── bootstrap.js
│ │ ├── components
│ │ │ └── Example.js
│ └── sass
│ ├── app.scss
│ └── _variables.scss

また、package.json杯かのようになっています。

json
1{
2    "private": true,
3    "scripts": {
4        "dev": "npm run development",
5        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
6        "watch": "npm run development -- --watch",
7        "watch-poll": "npm run watch -- --watch-poll",
8        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
9        "prod": "npm run production",
10        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
11    },
12    "devDependencies": {
13        "@babel/preset-react": "^7.0.0",
14        "axios": "^0.19",
15        "bootstrap": "^4.0.0",
16        "cross-env": "^5.1",
17        "jquery": "^3.2",
18        "laravel-mix": "^4.0.7",
19        "lodash": "^4.17.13",
20        "popper.js": "^1.12",
21        "react": "^16.2.0",
22        "react-dom": "^16.2.0",
23        "resolve-url-loader": "^2.3.1",
24        "sass": "^1.15.2",
25        "sass-loader": "^7.1.0"
26    }
27}
28

Exmple.jsは以下のように書いてあります。

JavaScript
1import React from 'react';
2import ReactDOM from 'react-dom';
3
4function Example() {
5    return (
6        <div className="container">
7            <div className="row justify-content-center">
8                <div className="col-md-8">
9                    <div className="card">
10                        <div className="card-header">Example Component</div>
11
12                        <div className="card-body">I'm an example component!</div>
13                    </div>
14                </div>
15            </div>
16        </div>
17    );
18}
19
20export default Example;
21
22if (document.getElementById('example')) {
23    ReactDOM.render(<Example />, document.getElementById('example'));
24}
25

viewはindex.blade.phpを作成し以下のようにしてあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Sample</title>
</head>
<body>
	<div id="example"></div>
	<script type="module" src="{{asset('/js/app.js')}}"></script>
</body>
</html>

ControllerはindexController.phpを作成し以下のように書いています。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class IndexController extends Controller {

        public function react() {

            return view('index');
    }
}

publicのjsのあたりの構造は以下のようになっており、
public
├── js
│ ├── app.js
│ │
│

app.jsは以下のように書いています。

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Example from '../resources/assets/js/components/Example.js';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ほぼ参考サイトのものをそのまま使っているのですが、この状態でxamppでlocalhostの8000につなげてもコンソールに
Uncaught SyntaxError: Unexpected token '<'　app.js 7
とでてきて表示ができません。

インポート部分の書き方がわるいのかとapp.jsの4行目を
import Exmple from 'Example';
のように変えてみたりしても変化がありません。

yarn hotが実行できていないのでpackage.jsonのところで何か間違いがあったのかと思ったのですが、よくわからず、yarnが使えないならnpmにすればいいのかと思いためしたのですが、そもそもnpmはnpm installの時点以下のようなエラーが出て使えませんでした。

C:\xampp\htdocs\LaravelReact>npm install
Error: EPERM: operation not permitted, mkdir 'C:\Program Files\Git\usr\local'
TypeError: Cannot read property 'get' of undefined
at errorMessage (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-me
at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-ha
at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:225:22)
at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:263:24
at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:81:7
at Array.forEach (<anonymous>)
at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:80:13
at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:
at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:97
var doExit = npm.config.loaded ? npm.config.get('_exit') : true
^

TypeError: Cannot read property 'loaded' of undefined
at exit (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js
at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils
at process.emit (events.js:210:5)
at process._fatalException (internal/process/execution.js:150:25)
Error: EPERM: operation not permitted, mkdir 'C:\Program Files\Git\usr\local'
TypeError: Cannot read property 'get' of undefined
at errorMessage (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-me
at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-ha
at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:225:22)
at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:263:24
at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:81:7
at Array.forEach (<anonymous>)
at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:80:13
at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:
at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:97
var doExit = npm.config.loaded ? npm.config.get('_exit') : true
^