如何将 React 组件连接到 Laravel Blade答案

【问题标题】：How to connect React Component to Laravel Blade如何将 React 组件连接到 Laravel Blade
【发布时间】：2020-01-01 01:08:55
【问题描述】：

我在将 React 添加到我的项目时遇到问题。组件未呈现。这不是 SPA 项目。

我尝试了最简单的方法。我已经使用“laravel new reactexample”设置了新项目，接下来我制作了“php artisan preset react”和“yarn run”。之后我添加了欢迎 Blade.php。

Example.js

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

export default class Example extends Component {
    render() {
        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 am an example component!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

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

welcome.blade.php，片段

<div class="content">
    {...}
    <div id="example"></div>
    {...}
</div>

webpack.mix.js

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

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

app.js

require('./bootstrap');
require('./components/Example');

我是否遗漏了配置中的某些内容？我应该怎么做才能在页面上渲染组件？

【问题讨论】：

标签： javascript php reactjs laravel

【解决方案1】：

好的，我找到了解决方案。我必须添加

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

到页面。

【讨论】：