菜鸡ReactJs-01 组件

2016-06-16  本文已影响43人  菜鸡

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位置
//插入后的回调
)

上一篇下一篇

猜你喜欢

热点阅读