Javascript Laravel ReactJs：在我的js（ReactJs）文件中更改后，更改不会反映出来_Javascript_Reactjs_Laravel_React Material

Javascript Laravel ReactJs：在我的js（ReactJs）文件中更改后，更改不会反映出来

javascript reactjs laravel

Javascript Laravel ReactJs：在我的js（ReactJs）文件中更改后，更改不会反映出来,javascript,reactjs,laravel,react-material,Javascript,Reactjs,Laravel,React Material,我正在使用Laravel中的Reactjs。在这里，我对React组件进行了一些更改，当我刷新浏览器时，更改不会显示出来档案：参考资料/views/welcome.blade.php <!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-U

我正在使用Laravel中的Reactjs。在这里，我对React组件进行了一些更改，当我刷新浏览器时，更改不会显示出来

档案：

参考资料/views/welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>arjunphp.com | Laravel 5.6 with React JS</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="example"></div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

resources/asset/js/components/Example.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button'

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-8 col-md-offset-2">
                        <div className="panel panel-default">
                            <div className="panel-heading">Example Component</div>

                            <div className="panel-body">
                                I'm an example component tomas!
                            </div>
                            <Button size="small" color="primary" href="#" target="_blank">
                                Go To Course
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“@material ui/core/Button”导入按钮
导出默认类示例扩展组件{
render（）{
返回(
示例组件
我是tomas的一个例子！
去球场
);
}
}
if（document.getElementById（'example'））{
ReactDOM.render（，document.getElementById（'example'））；
}

当我刷新浏览器时，我在此组件中添加了一个按钮，更改不会显示在浏览器中

屏幕截图：

如果没有，您是否编译了react.js代码：

npm run dev

并清除浏览器缓存以查看更改

拉维尔文献

记住，每次更改时都应该运行npm run dev命令 Vue组件。或者，您可以运行npm run watch命令进行监视并在每次运行组件时自动重新编译它们修改

它也需要做出反应。

试试这种方法，它被称为实时重新加载

通过实时重新加载，您可以在保存.js文件时刷新浏览器

转到

webbpack.mix.js

并将其添加到底部：

mix.browserSync（'localhost:8000'）


其中的参数取决于php artisan服务url和端口
运行npm Run watch
安装browserSync方法所需的依赖项
运行php artisan serve
和npm Run watch
（在不同的cmd上）
希望这有帮助
如果是工作，别忘了鼓掌
来源：
只需在控制台中运行此命令：
npm run 

如果您使用的是chrome，浏览器现在将根据文件更改自动更新。打开incognito选项卡并使用incognito选项卡，它会在重新加载时自动清除缓存
要在文件发生任何更改后更新代码，请运行此命令
npm运行观察
步骤1：首先必须在终端上写入：
npm install
npm run dev

npm run watch

第二步：
之后，无论何时更新任何内容，只要写下：
npm install
npm run dev

npm run watch

我认为一切正常
可能（取决于您的设置）在看到任何更改之前，您必须运行“npm run dev”。。。可能（取决于您的设置）您会在package.json文件中找到可用的npm命令使用npm run watch--watch poll
命令启动开发后，npm将在任何更改后动态侦听并重新构建所有JS组件。请问您是如何解决此问题的？我也有类似的问题。