<!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. ROS 订阅图像节点(1)

    博客 http://blog.csdn.net/github_30605157/article/details/50990493 参考ROS原网站 http://wiki.ros.org/image_ ...

  2. 为什么签名前要加"\x19Ethereum Signed Message:\n"

    在以太坊中,可以找到关于上述破损的解释例子.以太坊有两种消息,交易

  3. Python基础（3）if_else、for、while、break与continue

    1.if ... else a=6 if a>=5: print("The a is bigger than 5") else: print("The a is s ...

  4. <操作系统>进程和线程

    进程 定义: 一个正在执行的程序: 一个正在计算机上执行的程序实例; 能分配给处理器并由处理器执行的实体: 一个由一组执行指令,一个当前状态和一组相关的系统资源表征的活动单元. 进程的基本元素:程序代 ...

  5. MySQL（十）操纵表及全文本搜索

    一.创建表 MySQL不仅用于表数据操作,还可以用来执行数据库和表的所有操作,包括表本身的创建和处理. 创建表一般有如下两种方式: ①使用具有交互式创建和管理表的工具: ②直接使用MySQL语句操纵表 ...

  6. GIT 管理修改、删除文件

    管理修改 现在,假定你已经完全掌握了暂存区的概念.下面,我们要讨论的就是,为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 你会问,什么是修改?比如你新增了一行,这就 ...

  7. Tensorflow[目录结构]

    1 - Tensorflow源码目录结构 基于2018年5月28日github的tensorflow源码,即1.8版本 第一层: tensorflow: 核心代码目录. third_party:第三方 ...

  8. 在WPF中使用FontAwesome图标字体

    原文:在WPF中使用FontAwesome图标字体 版权声明:原创内容转载必须注明出处,否则追究相关责任. https://blog.csdn.net/qq_36663276/article/deta ...

  9. iOS开发简记（1）：指定APP的图标与启动图

    各位兄弟姐妹们,早上好,本人花了将近一个月的时间打造了一个完整的IOS版的App, 期间包括开发,测试,上线审核,现在花点时间把实现的过程分享给大家,“知音”app功能简单,适合对象为初学者,后面我会 ...

  10. PHP从入门到精通(一)

    (一)PHP简介和基本知识 PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于 ...