我在 Laravel 中使用 Reactjs 。这里我在我的 React 组件中做了一些更改,当我刷新浏览器时,更改没有显示。
档案:
- 资源/视图/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
/**
* 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/组件/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'));
}
当我刷新浏览器时,我在此组件中添加了一个按钮,更改未显示在浏览器中。
屏幕截图:
原文由 Tomas 发布,翻译遵循 CC BY-SA 4.0 许可协议
你编译过 react.js 代码吗?
如果不运行:
如果您没有看到更改,请清除浏览器缓存。
Laravel 文档
React 也需要它。