Laravel ReactJs：更改我的 js(reactjs) 文件后未反映更改答案

【问题标题】：Laravel ReactJs : Changes are not reflecting after change in my js(reactjs) fileLaravel ReactJs：更改我的 js(reactjs) 文件后未反映更改
【发布时间】：2019-04-24 19:07:36
【问题描述】：

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

文件：

资源/视图/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>

资源/资产/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

require('./components/Example');

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'));
}

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

屏幕截图：

【问题讨论】：

可能（取决于您的设置）您必须先运行“npm run dev”才能看到任何更改……可能（取决于您的设置）您会在包中找到可用的 npm 命令。 json文件
在开始开发后使用npm run watch --watch-poll 命令，NPM 将在任何更改后即时侦听并重新构建所有 JS 组件。
请问你是怎么解决这个问题的？我有类似的问题。

标签： javascript reactjs laravel react-material

【解决方案1】：

你编译 react.js 代码了吗？

如果不运行：

npm run dev

如果您没有看到更改，请清除浏览器缓存。

Laravel 文档

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

React 也需要它。

【讨论】：

很好的答案。简短而有效。

【解决方案2】：

试试这个方法，它叫做 Live Reloading。

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

转到webbpack.mix.js 并在底部添加：

mix.browserSync('localhost:8000');

里面的参数取决于你的 php artisan serve url 和 port。

运行 npm run watch 以安装 browserSync 方法所需的依赖项。
运行 php artisan serve 和 npm run watch（在不同的 cmd 上）

希望对您有所帮助。

如果工作成功，别忘了给掌声。

来源：https://medium.com/@michael.tandio/easy-setup-hot-loader-for-react-laravel-with-laravel-mix-8f68a1393624

【讨论】：

【解决方案3】：

要在文件发生任何更改后更新代码，请运行此命令

npm run watch

【讨论】：

【解决方案4】：

如果您使用的是 chrome。打开隐身标签并使用隐身标签，它会在重新加载时自动清除缓存

【讨论】：

【解决方案5】：

第一步：首先你必须在终端上写：

npm install
npm run dev

第 2 步： 在那之后，每当您更新任何内容时，只需写：

npm run watch

我觉得一切正常

【讨论】：

【解决方案6】：

只需在控制台中运行此命令：

npm run

浏览器现在将根据文件更改自动更新

【讨论】：

不起作用....