<!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. k8s部署rocketmq 双主

    由于apache 官网的 docker image 是单点,要实现集群方式部署. rocketmq 分为 nameserver 和 broker , 对于之间调用频繁的服务,会增加网络压力, 所以 考 ...

  2. 将Integer赋值给int(空指针异常)

    将Integer赋值为null,然后在赋值给int类型,会出现空指针异常

  3. ls操作总结

    la = ls -a ll = ls -l ls -lsh: ls -lsh train_log 看train_log的软链接的原始路径

  4. fatal error LNK1169: 找到一个或多个多重定义的符号或多个.c/.cpp文件想同时调用定义在.h文件里面的全局变量，防止重定义变量问题。

    为什么.h文件中不能定义全局变量? 原因: 存在多次创建变量.如果头文件中可以定义全局变量,那么每个包含该头文件的文件里都会有该全局变量的定义.因为C语言的include是直接将文件嵌入到includ ...

  5. nginx的反向代理proxy_pass指令

    1. 首先什么是代理服务器?客户机发送请求时,不会直接发送到目的主机,而是先被代理服务器收到,代理服务器收到客服机的请求后,再向目的机发出,目的机就会返回数据给客户机,在返回给客户机之前,会被代理服务 ...

  6. mysql基础讲解

  7. arm那些事

    ARM简介 ARM的商业模式: ARM只负责设计IC,并且出卖自己的设计IP(版权). ARM自己不生产芯片,而是把设计IP授权给其他半导体厂商来生产芯片. 严格地说,ARM并不是一家半导体厂商.   ...

  8. C# 深浅复制 MemberwiseClone（转载）

    最近拜读了大话设计模式:原型模式,该模式主要应用C# 深浅复制来实现的!关于深浅复制大家可参考MSDN:https://docs.microsoft.com/zh-cn/dotnet/api/syst ...

  9. LOJ564 613的天网 构造

    题目传送门 题意:给出一个$N \times N \times N$的方块,你可以在每一个$1 \times 1 \times 1的方块上放上一个摄像头,摄像头的监视范围为6个方向的无限远距离.问最少 ...

  10. Bitcoin 使用及配置记录

    常用配置 bitcoin-qt.exe -testnet -printtoconsole -conf=D:\Bitcoin\bitcoin.conf -datadir=D:\Bitcoin\Data ...