javascript - Laravel ReactJs : Changes are not reflecting after change in my js(reactjs) file

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

文件:

resources/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>

资源/asset/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');

资源/ Assets /js/组件/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'));
}

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

屏幕截图:

最佳答案

你编译过react.js代码吗？

如果没有运行:

npm run dev

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

Laravel 文档

Remember, you should run the npm run dev command each time you change a Vue component. Or, you may run the npm run watch command to monitor and automatically recompile your components each time they are modified.

React 也需要它。

关于javascript - Laravel ReactJs : Changes are not reflecting after change in my js(reactjs) file，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53425186/

javascript - Laravel ReactJs : Changes are not reflecting after change in my js(reactjs) file

上一篇：javascript - 在 ReactJS 中使用 jQuery 是一种不好的做法吗？

下一篇：reactjs - React js 中 getDerivedStateFromProps 中的多个 props 验证