ES2015(es6)
react入门
发布时间：2019-08-15 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react入门，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
随着react的升级，许多人连怎么运行react都不会了。这只能怪它的官网太烂了。
如果我们想像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标签的内容改一下。比如组件这一节:
