使用混合反应

Question

我正在尝试在laravel应用程序中设置反应前端。

我正在关注this tutorial以仅链接我的反应组件，但它无效。

我的文件是正确的，我没有收到任何错误。

这是我的 app.js

require('./bootstrap');

import Example from './components/Example';

我还更改了 webpack.mix.js

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


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

这是我的组件

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

class Example extends Component {
    render() {
        return (
            <div>
                <h1>Cool, it's working</h1>
            </div>
        );
    }
}

export default Example;

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

我在 app.blade.php

中有这一行

<script src="{{ mix('js/app.js') }}"></script>

但是我的<div id="example"></div>是空的，我不确定原因。

我在执行npm run watch时没有收到任何错误，所以我不知道从哪里开始。