随着react的升级,许多人连怎么运行react都不会了。这只能怪它的官网太烂了。
react使用了es6,这意味着要安装babel。
如果我们想像jQuery那么简单的开箱即用,早期是提供了browser.js。后来又莫名其妙不见了。这门槛太大了。
首先我们要集齐要用到的JS文件,从各个CDN站点上搜罗吧。
这里有react, react-dom。
https://segmentfault.com/q/10...
这里的回复有 browser.js
然后我们编写这样一个HTML文件
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.bootcss.com/react/15.4.1/react.js"></script>
<script src="//cdn.bootcss.com/react/15.4.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getDefaultProps: function() {
return {
name: 'world'
}
},
onclick: function(e) {
console.log('click', e)
},
render: function() {
return <h1 onClick = {
this.onclick
} > Hello, {
this.props.name
} </h1>;
}
})
ReactDOM.render( <Hello / > , document.getElementById('example'));
</script>
</body>
</html>
在体验过程,这网络太慢了,因为最后一个JS在国外。
我们发现browser.js其实是babel,因此我们也可以在CDN上找到
http://www.bootcdn.cn/babel-c...
并且经过本人的反复测试,只有5.x的browser.js才能直接支持react.js。那么我们就用它的5.x的最高版本吧。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.bootcss.com/react/15.4.1/react.js"></script>
<script src="//cdn.bootcss.com/react/15.4.1/react-dom.js"></script>
<script src="//cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getDefaultProps: function() {
return {
name: 'world'
}
},
onclick: function(e) {
console.log('click', e)
},
render: function() {
return <h1 onClick = {
this.onclick
} > Hello, {
this.props.name
} </h1>;
}
})
ReactDOM.render( <Hello / > , document.getElementById('example'));
</script>
</body>
</html>
好了,由于官方教程是这么烂,我们直接在下面地址学习就行了
http://www.ruanyifeng.com/blo...
每次直接把script标签的内容改一下。比如组件这一节:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.bootcss.com/react/15.4.1/react.js"></script>
<script src="//cdn.bootcss.com/react/15.4.1/react-dom.js"></script>
<script src="//cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。