react入门基础
2016-09-15 本文已影响67人
酱油_
现在还没有打算深入学习react,只是为了了解，免得被人问到什么都说不上来，所以初略的做一下笔记
- react推荐使用jsx来写js，所以我们会多链接一个库来支持jsx编译，现在想使用jsx是需要引用cdn babel下的browser库
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"
<script type="text/babel">
//这里就可以使用jsx语法了
</script>
- jsx语法最特别的地方就是可以将html结构直接写在js中，不用加什么引号什么的，他别方便
- 然后要引入react
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js></script>"
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js</script>"
- 然后就是官网上一个最简单的例子
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<body>
<div id="container"></div>
<script type="text/babel">
var Hello=React.createClass({
render:function(){
return <div>Hello {this.props.name}</div>
}
});
React.render(
<Hello name="请加油">,
document.getElementById("container")
)
</script>
</body>
然后就会在页面中渲染出一个react组件，显示为 Hello 请加油
