<!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. Python高级网络编程系列之第三篇

    在高级篇二中,我们讲解了5中常用的IO模型,理解这些常用的IO模型,对于编写服务器程序有很大的帮助,可以提高我们的并发速度!因为在网络中通信主要的部分就是IO操作.在这一篇当中我们会重点讲解在第二篇当 ...

  2. MariaDB CEO 痛斥云厂商从不回馈社区

    导读 MariaDB 首席执行官 Michael Howard 表示,亚马逊和 Oracle 将客户牢牢锁定.他还想知道 AWS 是否可能对 AWS MariaDB 实例动手脚,好让 AWS 自己的数 ...

  3. SQL 行转列 列转行 PIVOT UNPIVOT

    1.基础表 2.行转列,注意ISNULL函数的使用,在总成绩的统计中,ISNULL(-,0) 有必要使用 3.列转行,对列语文.数学.英语.政治,进行列转行,转为了2列,score scname 这两 ...

  4. C#基础巩固(1)-多态+简单工厂

    多态 如果要简要的描述多态的话,我个人是这样理解的:通过继承,父类定义方法,具休的实现由子类进行. 01代码 //父类 class Person { public virtual void skill ...

  5. .net获取excel表的内容（OleDB方法)

    首先引用组件和命名空间 using Microsoft.Office.Interop.Excel; using System.Data.OleDb; 然后把excel上传到指定路径 上传文件方法省略 ...

  6. [Oracle]TM lock (DML enqueue) 的相容性

    [Oracle]TM lock (DML enqueue) 的相容性 RS(SS):  行共享     LMODE =2 RX(SX):  行独占     LMODE =3 S:       共享   ...

  7. 使用Pyspark进行特征工程时的那些坑

    以脚本spark_clean_online_action.py.数据集new_sxf_time_count_1781115582.csv为例: 集群节点包括212.216.217.218.需要注意的是 ...

  8. C#_Math函数总结

    Math.abs() 计算绝对值. Math.acos() 计算反余弦值. Math.asin() 计算反正弦值. Math.atan() 计算反正切值. Math.atan2() 计算从x 坐标轴到 ...

  9. 重建索引解决mssql表查询超时的问题

    表已有数据,150万+,执行一个group by 的查询出现超时,一个一个条件减少尝试,前几个where条件不超时,而在加上最后一个条件时就超时了. 分析表的索引建立情况:DBCC showconti ...

  10. TRIO-basic指令--FLEXLINK

    Type: Axis Command Syntax: FLEXLINK(base_dist, excite_dist, link_dist, base_in, base_out, excite_acc ...