<!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. 解决 docker ulimit open file 过少的问题

    解决方法: ExecStart=/usr/bin/dockerd -- -- -- -- --insecure-registry= --dns --dns-opt timeout: --dns-opt ...

  2. go标准库的学习-io

    参考https://studygolang.com/pkgdoc 导入方式: import "io" o包提供了对I/O原语的基本接口.本包的基本任务是包装这些原语已有的实现(如o ...

  3. spring的@Transaction使用注意

    文章参考资料 https://www.cnblogs.com/andy-zhou/p/5317866.html http://labreeze.iteye.com/blog/2277261 Sprin ...

  4. mybatis的批量更新实例

    近来批量添加,删除,更新用的比较多,单一的删除和更新,操作无法满足企业某些业务的需求,故通过以下示例分享知识: 今天通过更新的例子来说明 演示环境为jdk8,maven环境,ssm框架 请准备好环境, ...

  5. layui前端框架之分页

    框架环境:SSM框架 为了保证效果,此次演示也用到了jQuery ui框架,大家最好也引入进来 一.去layui官网下载包,解压后,然后导入文件中,最好放再main/webapp文件夹下 官网地址如下 ...

  6. scp传输文件的命令

    scp传输文件的命令 一:scp常规的使用方式: scp可以进行简单的远程复制文件的功能.它是一个在各个主机之间进行复制或文件传输的一个命令工具.它使用一种同ssh一样的安全机制来进行文件的传输. 注 ...

  7. git安装配置

    1.git 安装 sudo apt-get install git 2.配置本机git的两个重要信息,user.name和user.email git config --global user.nam ...

  8. 用JavaDoc生成项目文档

    项目到了尾声,大家都开始头疼——又要写文档了……是的,我们大多数人都不是从正规的Programer训练出来的.当初学习编程序的时候,就从来没有想过要给自己写的那几个程序编写一份完整的文档,所有的注释都 ...

  9. Linux/CentOS下安装MySql RPM Bundle

    一.下载对应的版本的MySql安装文件 1.下载路径 https://dev.mysql.com/downloads/mysql/ 2.选择对应的Linux版本和x86/x64位的安装文件 查看Lin ...

  10. [转]The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path

    完整错误信息: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS"AS IS" AND ANY ...