Laravel ReactJs:我的js(reactjs)文件更改后更改未反映 [英] Laravel ReactJs : Changes are not reflecting after change in my js(reactjs) file

查看:30
本文介绍了Laravel ReactJs:我的js(reactjs)文件更改后更改未反映的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm using the Reactjs in Laravel.Here I made some changes in my React Component and when I refresh my browser then changes are not shown.

文件:

  1. resources/views/welcome.blade.php

  1. 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>

  • 资源/资产/js/app.js

  • resources/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');
    

  • 资源/资产/js/components/Example.js

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

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

    I add a Button in this component when I refresh the browser the changes are not shown in browser.

    屏幕截图:

    推荐答案

    如果不编译,是否编译react.js代码:

    did you compile react.js code if not :

    npm run dev
    

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

    and clear browser cache to see changes

    Laravel文档

    请记住,每次更改时都应运行npm run dev命令Vue组件.或者,您可以运行npm run watch命令进行监视并在每次使用时自动重新编译您的组件修改.

    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.

    也需要做出反应.

    这篇关于Laravel ReactJs:我的js(reactjs)文件更改后更改未反映的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆