Laravel ReactJs : Changes are not reflecting after change in my js(reactjs) file
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:
Answer
did you compile react.js code if not :
npm run dev
and clear browser cache to see changes
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 is needed to react too.