[英]Simple ReactJs Example not working
Getting issue with simple ReactJs Example using from react website : 使用来自react网站的简单ReactJs示例:
First i imported : 首先我导入:
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
Then i copy and pasted code : 然后我复制并粘贴代码:
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
<div>
<h1>Welcome</h1>
</div>
);
}
});
ReactDOM.render(<CommentBox/>, document.body);
When opened page nothing show. 打开页面时没有显示。 Also tried :
还尝试过:
document.getElementById('example')
No error in console don't no what issue is. 控制台中没有错误,不会出现什么问题。
I am using jquery in page and using Laravel with Blade templates let me know if that is issue. 我在页面中使用jquery并使用带有Blade模板的Laravel让我知道是否存在问题。
Also tried to use external script : 还尝试使用外部脚本:
<script src="/lib/react-example.js" type="text/jsx"></script>
This is my Live Server you can check here. 这是我的Live Server,你可以在这里查看。
Thanks 谢谢
If you want to use the JSX syntax, you need to mark your script tags with type=text/babel
and also load the babel browser script with: 如果要使用JSX语法,则需要使用
type=text/babel
标记脚本标记,并使用以下内容加载babel浏览器脚本 :
<script src="https://unpkg.com/react@16.5.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.5.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
var CommentBox = React.createClass({
render: function() {
return (
<div>
<h1>Welcome</h1>
</div>
);
}
});
ReactDOM.render(<CommentBox/>, document.body);
</script>
Here is an example on jsfiddle , unfortunately it doesn't work on StackOverflow snippets. 这是jsfiddle的一个例子,遗憾的是它不适用于StackOverflow片段。
Another option is to transcompile your .jsx
it to javascript on the server side using a solution such as browserify or webpack . 另一种选择是transcompile您
.jsx
使用的解决方案,例如它的JavaScript在服务器端browserify或的WebPack 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.