美文网首页
菜鸡ReactJs-01 组件

菜鸡ReactJs-01 组件

作者: 菜鸡 | 来源:发表于2016-06-16 12:00 被阅读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位置
    //插入后的回调
    )

    相关文章

      网友评论

          本文标题:菜鸡ReactJs-01 组件

          本文链接:https://www.haomeiwen.com/subject/leemdttx.html