1:引入ReactJs的文件和编译器。
<!-- 引入react.js -->
<script src="bower_components/react/react.js"></script>
<!--引入编译器JSXTransformer.js-->
<script src="bower_components/react/JSXTransformer.js"></script>
2:告诉她,你要用JSX方式不是传统javascript。
<script type="text/jsx">
</script>
3:下面就可以开始写ReactJS了,内联方式。
<script type="text/jsx">
//React.createClass 是创建组件的方法
var Test = React.createClass({
//render: function() 是返回组件结构
render: function(){
return (<h1>helloworld</h1>)
}
});
//React.render 是转换为HTML然后插入到DOMTREE,就是渲染
React.render(
<Test/>,
document.getElementById('TestCont'),
function(){
console.log('渲染完成。');
}
)
</script>
PS:React.render参数
React.render (
//ReactJS组件
//插入DOMTERR位置
//插入后的回调
)
网友评论