<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

  var TitleComponent = React.createClass({
    render:function(){
      return <h1> Web</h1>;
    }
  })

  var InfoComponent = React.createClass({
    render:function(){
      return <p> it is a good class </p>
    }
  })

  var ComplexComponent = React.createClass({
    render:function(){
      return <div>
      <TitleComponent/>
      <InfoComponent/>
      </div>
    }
  })

  ReactDOM.render(
  <ComplexComponent/>,
  document.getElementById('example')
  )
</script>
</body>
</html>

React 组件的更多相关文章

  1. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  2. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  3. React 组件性能优化

    React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...

  4. React组件属性部类（propTypes）校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  5. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  6. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  7. React组件性能优化

    转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...

  8. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  9. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

  10. React组件系统、props与状态(state)

     多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...

随机推荐

  1. http://blog.csdn.net/pipisorry/article/details/51471222

    这个博主很有意思 机器学习之用Python从零实现贝叶斯分类器 参数估计:贝叶斯思想和贝叶斯参数估计

  2. nightwatch-前端自动化测试工具安装

    最近再弄这个前端自动化测试工具,刚开始弄了几天,目前为止遇到很多坑,光是安装就费了不少时间,记录一下,以便自己忘记. 这里是它的官网,目前没找到中文版的官网,全英文,对我这个英语渣来说有点难理解. 一 ...

  3. Linux kernel Programming - Advanced Char Driver Operations

    ioctl //user space int ioctl(int fd,unsigned long cmd,...); //kernel space int (*ioctl)(struct inode ...

  4. Android TextView的属性设置为textstyle="bold"时 中文的“￥”不显示

    昨天在修改列表的时候出现了一个挺让人纠结的问题.在TextView中“￥”符号无论如何也显示不出来.尝试了使用气的特殊符号,都是能够正确显示的. 最后百度google了一圈也没找出个所以然来.于是觉得 ...

  5. Kafka笔记--常用指令(新建、删除topic)

    新建topic ./kafka-topics.sh --zookeeper 192.168.1.160:2181 --create --topic kafkatestsmall2 --partitio ...

  6. Luogu4139 上帝与集合的正确用法 拓展欧拉定理

    传送门 题意:求$2^{2^{2^{2^{...}}}} \mod p$的值.$p \leq 10^7$ 最开始想到的是$x \equiv x^2 \mod p$,然后发现不会做... 我们可以想到拓 ...

  7. 重装系统之无法在驱动器0的分区1上安装windows

    在通过U盘或光盘安装win8/win8.1/win10 时,遇到无法安装的问题,提示“无法在驱动器0的分区1上安装windows”,格式化分区也不能解决,进而提示Windows无法安装到这个磁盘,选中 ...

  8. 微信小程序开发需要注意的30个坑

    1.小程序名称可以由中文.数字.英文.长度在3-20个字符之间,一个中文字等于2个字符. 2.小程序名称不得与公众平台已有的订阅号.服务号重复.如提示重名,请更换名称进行设置. 3.小程序名称在帐号信 ...

  9. 如何用区块链技术解决信任问题？Fabric 架构深度解读

    阿里妹导读:区块链技术,随着比特币的兴起而为大家所知.但是具体到技术本身,大家相对熟悉的几个词可能是“数据不可篡改”.“公开链”.“分布式数据”.“共识机制”等. 这篇文章将抛砖引玉,通过深度解读Hy ...

  10. Socket异步通信及心跳包同时响应逻辑分析（最后附Demo）。

    有段时间没有更博了,刚好最近在做Socket通信的项目,原理大致内容:[二维码-(加logo)]-->提供主机地址和端口号信息(直接使用[ThoughtWorks.QRCode.dll]比较简单 ...