美文网首页
菜鸡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 组件

    1:引入ReactJs的文件和编译器。 2:告诉她,你要用JSX方式不是传统javascript。 3:下面就可以...

  • 菜鸡ReactJs-02 组件嵌套

    这个没啥好说的,就是把组件套组件。。。一直套下去用。 套起来用的时候,当时外面没用DIV标签包着,结果就出错了。

  • 小程序组件封装

    前端的一枚菜鸡 在微信小程序开发的过程中自己手写了几个组件,仅此记录自己的学习。小程序的component组件思路...

  • 菜鸡

    今天跟朋友打游戏,四排五黑,本来很菜的我在排位赛中表现出来自己的真实面目。一只毫无用处的小菜鸡,上分很难。 生活上...

  • 菜鸡

    节前主持了个小活动,不主持不知道自己有多菜,一上场原形毕露,真是个彻头彻尾的菜鸡,主持场面完全hou不住。 9月部...

  • 菜鸡ReactJs-03 组件状态state

    1:getInitialState:function( ){ } 这个是设置一个默认值。 2:this.state...

  • 今天比较字符串使用了==

    菜鸡!

  • 菜鸡ReactJs-04 组件的参数props

    目标是从父组件继承参数进子组件内容 1:先新建一个父组件,并且获得父组件的标题,获得父组件conts内容赋给一个m...

  • 菜鸡和芦花鸡

    一地鸡毛这个词是对人们在生活中不如意的生动描写。看了一个电视剧,剧中两家邻居过的都比较窘迫,一家孩子没工作儿媳妇没...

  • 菜鸡玩吃鸡

    今天下午独自玩了 一会吃鸡 的游戏。 一个人匹配,还是喜欢的是海岛和雨林。一个人和 其他 三个不认识的人一块,当时...

网友评论

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

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