Question

我正在Laravel 5.8上使用基本的React安装。我的刀片服务器hoolaMundo.blade.php标识了文件css/app.css和js/app.js，但是在浏览器中什么都没有显示。

holaMundo

    <html>
        <head>
            <link href="/css/app.css" rel="stylesheet">
        </head>
        <body>
            <div id="Example"></div>
        </body>
    </html>
    <script src="/js/app.js"></script>

组件

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import Main from "../../assets/js/components/Example";
    
    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'm an example component!</div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }
    
    export default Example;
    
    if (document.getElementById('Example')) {
        ReactDOM.render(<Example />, document.getElementById('Example'));
    }

网络结果

enter image description here

其他信息

节点-v：14.7.0 PHP的-v：7.3.5 npm -v：4.14.7 完成 npm安装 npm dev run

Answer 1

由于信誉不佳，我通常会使用评论部分，因此我需要输入一个大答案。

事情，很高兴看到您的混合文件？您是否使用.react？ https://laravel.com/docs/5.8/mix#react
Laravel有时表现得很奇怪，我不喜欢它，但是我建议您使用Asset函数来刷新样式脚本等。然后确保所有内容都正确发送。
我会将script标记放在html标记内。
很高兴知道您的安装反应如何？您使用larvel还是node方法？
我该怎么做。通常，我进入我的resource / js文件夹并通过
安装
npm i create-react-app myapp

然后我进入laravel混合并粘贴：

.react('resources/js/myapp/index.js', 'public/js/myapp.js');

如果您无法运行npm i create-react-app myapp，则需要先安装它。在此处结帐：https://www.npmjs.com/package/create-react-app

React在Laravel 5.8刀片中未显示组件

1 个答案: