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:
javascript reactjs laravel react-material
edited Nov 22 '18 at 7:51
c-chavez
2,20321733
asked Nov 22 '18 at 6:40
TomasTomas
1172522
add a comment |
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:
javascript reactjs laravel react-material
edited Nov 22 '18 at 7:51
c-chavez
2,20321733
asked Nov 22 '18 at 6:40
TomasTomas
1172522
1
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 6:49
Usenpm run watch --watch-pollcommand 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 7:09
add a comment |
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:
javascript reactjs laravel react-material
edited Nov 22 '18 at 7:51
c-chavez
2,20321733
asked Nov 22 '18 at 6:40
TomasTomas
1172522
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:
javascript reactjs laravel react-material
javascript reactjs laravel react-material
edited Nov 22 '18 at 7:51
c-chavez
2,20321733
asked Nov 22 '18 at 6:40
TomasTomas
1172522
edited Nov 22 '18 at 7:51
c-chavez
2,20321733
asked Nov 22 '18 at 6:40
TomasTomas
1172522
edited Nov 22 '18 at 7:51
c-chavez
2,20321733
edited Nov 22 '18 at 7:51
c-chavez
2,20321733
edited Nov 22 '18 at 7:51
c-chavez
2,20321733
2,20321733
asked Nov 22 '18 at 6:40
TomasTomas
1172522
asked Nov 22 '18 at 6:40
TomasTomas
1172522
asked Nov 22 '18 at 6:40
TomasTomas
1172522
1172522
1
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 6:49
Usenpm run watch --watch-pollcommand 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 7:09
add a comment |
1
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 6:49
Usenpm run watch --watch-pollcommand 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 7:09
1
1
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 6:49
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 6: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 7:09
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 7:09
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 22 '18 at 6:53
Puria DeveloperPuria Developer
364
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425186%2flaravel-reactjs-changes-are-not-reflecting-after-change-in-my-jsreactjs-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 22 '18 at 6:53
Puria DeveloperPuria Developer
364
add a comment |
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.
answered Nov 22 '18 at 6:53
Puria DeveloperPuria Developer
364
add a comment |
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.
answered Nov 22 '18 at 6:53
Puria DeveloperPuria Developer
364
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.
answered Nov 22 '18 at 6:53
Puria DeveloperPuria Developer
364
answered Nov 22 '18 at 6:53
Puria DeveloperPuria Developer
364
answered Nov 22 '18 at 6:53
Puria DeveloperPuria Developer
364
answered Nov 22 '18 at 6:53
Puria DeveloperPuria Developer
364
364
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425186%2flaravel-reactjs-changes-are-not-reflecting-after-change-in-my-jsreactjs-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
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 6:49
Use
npm run watch --watch-pollcommand 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 7:09