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

Question

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.

Files:

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>

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

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.

Screen-Shot:

probably (depending on your setup) you have to run "npm run dev" before you see any changes... probably (depending on your setup) you will find the available npm commands in the package.json file — herrjeh42, Nov 22 '18 at 06:49
Use `npm run watch --watch-poll` command after starting your developing and NPM will listen and re-build all your JS components on the fly after any changes. — alexey-novikov, Nov 22 '18 at 07:09

score 12 · Answer 1 · edited Nov 21 '21 at 09:55

12

Did you compile react.js code?

If not run:

npm run dev

If you don't see changes, clear the browser cache.

Laravel Documentation

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.

It's needed for React too.

edited Nov 21 '21 at 09:55

Gass

7,536
3
37
41

answered Nov 22 '18 at 06:53

Puria Golgoon

216
1
5

Great answer. Short and it works. – Gass Nov 21 '21 at 09:54

Michael Harley · Answer 2 · 2019-05-21T14:43:53.470

Try this method, it's called Live Reloading.

With Live Reloading, you can get refreshed browser when you save your .js file.

Go to webbpack.mix.js and add this at the bottom:

mix.browserSync('localhost:8000');

The parameter inside depend on your php artisan serve url and port.

Run npm run watch to install dependency needed for browserSync method.
Run php artisan serve and npm run watch (on different cmd)

Hope this help.

Don't forget to give applause if it is work.

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

score 2 · Answer 3 · answered Nov 19 '20 at 10:37

2

For update your code after any change in your file, run this command

npm run watch

answered Nov 19 '20 at 10:37

E.outmane

51
2

score 0 · Answer 4 · answered Nov 13 '19 at 07:38

0

if you are using chrome. open incognito tab and use the incognito tab it clears cache automatically on reload

answered Nov 13 '19 at 07:38

simphiwe sifiso hlabisa

335
3
11

score 0 · Answer 5 · answered Mar 02 '21 at 02:33

0

Step 1: firstly you must write on the terminal:

npm install
npm run dev

Step 2: after that time, whenever you update anything just write:

npm run watch

I think everything ok

answered Mar 02 '21 at 02:33

NH Dalim

312
1
5
13

Akansha Gupta · Answer 6 · 2019-09-11T13:23:41.863

-1

Just run this command in the console:

npm run

the browser will now automatically get updated corresponding to file changes

edited Sep 11 '19 at 13:23

answered Aug 29 '19 at 09:59

Akansha Gupta

1
2

Doesnt work.... – Gass Nov 21 '21 at 09:53

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

6 Answers6

Linked