現(xiàn)在還沒有打算深入學(xué)習(xí)react,只是為了了解,免得被人問到什么都說不上來藏研,所以初略的做一下筆記
- react推薦使用jsx來寫js寄啼,所以我們會(huì)多鏈接一個(gè)庫(kù)來支持jsx編譯背率,現(xiàn)在想使用jsx是需要引用cdn babel下的browser庫(kù)
<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結(jié)構(gòu)直接寫在js中,不用加什么引號(hào)什么的羡铲,他別方便
- 然后要引入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>"
- 然后就是官網(wǎng)上一個(gè)最簡(jiǎn)單的例子
<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="請(qǐng)加油">,
document.getElementById("container")
)
</script>
</body>
然后就會(huì)在頁(yè)面中渲染出一個(gè)react組件蜂桶,顯示為 Hello 請(qǐng)加油