React的一个最大的特点就是组件化的开发模式。今天就来试一下：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Hello React!</title>

    <script src="../src/react-0.14.3/build/react.js"></script>

  <script src="../src/react-0.14.3/build/react-dom.js"></script>

    <script src="../src/react-0.14.3/build/browser.min.js"></script>

  </head>

  <body>

    <div id='header'>

    </div>

    <hr  style="clear:both" />

    <div id="body">

      <div> Hi this is test page</div>

    </div>

    <hr />

    <div id="footer"></div>

    <script type="text/babel">

    var JMFooter = React.createClass({

      render: function() {

        return (

            <div className="footer">

              <a href="/AboutUS.aspx">关于博客园</a>

              <a href="/ContactUs.aspx">联系我们</a>

              ©2004-2015<a href="http://www.cnblogs.com/">博客园</a>

              保留所有权利

              <a href="http://www.miitbeian.gov.cn" target="_blank">沪ICP备09004260号</a>

            </div>

        );

      }

    });

    var JMHeader = React.createClass({

      render: function(){

        return <div><div style={{color:'red'}}><h1 >Jimson Blog</h1></div><h3>今天是{this.props.date} </h3></div>;

      }

    })

    ReactDOM.render(

      <JMHeader date={(new Date).toDateString()} style={"float:left"}/>,

      document.getElementById('header')

      );

    ReactDOM.render(

       <JMFooter />,

      document.getElementById('footer')

    );

    </script>

  </body>

</html>

创建两个组件Header，和Footer。 常见的网站头部和底部(这里直接复制了博客园的地步) 看效果：

有几个问题JSX语法的问题：

1. 添加css 类，<div class="footer">  是没有效果的，也不会渲染熟悉，正确的是 <div className="footer">

2. 添加style，<div style="color:red">是直接报错的，这里JSX语法不支持这样的，正确的写法是 <div style={{color:'red'}}>

3. 创建组件：React.createClass的render方法只能返回一个封装的节点，多个节点就会报错。如：return<h1></h1><h2></h2> 报错，return <div><h1></h1><h2></h2></div> 是成功的。

4. jsx不会写，没关系，用 jsx compiler 直接把html翻译过来。

React 学习二 组件的更多相关文章

  1. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  2. 【react学习二】create-react-app 接入antd 并按需加载组件

    1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": ...

  3. AntDesign(React)学习-15 组件定义、connect、interface

    虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...

  4. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  5. react学习(二)之通信篇

    react性能提升原理:虚拟DOM react把真是的DOM tree,转化成virtual DOM,每次数据更新后,重新计算virtual DOM并与上一次的作对比,然后对发生改变的部分进行批量更新 ...

  6. React 学习(二) ---- props验证与默认属性

    在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...

  7. react学习二 生命周期

    转自:https://www.cnblogs.com/gdsblog/p/7348375.html react 中compent getDefaultProps object getDefaultPr ...

  8. React学习——子组件给父组件传值

    //子组件 var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:<input onCha ...

  9. React学习——ListView组件

    (草稿) 先把代码放上来,再补充说明 <!DOCTYPE html> <html> <head> <title>React ListView</t ...

随机推荐

  1. 【Learning】矩阵树定理 Matrix-Tree

    矩阵树定理 Matrix Tree ​ 矩阵树定理主要用于图的生成树计数. 看到给出图求生成树的这类问题就大概要往这方面想了. 算法会根据图构造出一个特殊的基尔霍夫矩阵\(A\),接着根据矩阵树定理, ...

  2. Linux及安全实践二——模块

    Linux及安全实践二--模块 一.模块的编译.生成.测试.删除 1.编写模块代码 编写:gedit 3.c 2.编写Makefile obj-m :这个变量是指定你要声称哪些模块模块的格式为 obj ...

  3. bzoj 4521: [Cqoi2016]手机号码

    感觉get到了一种数位dp的新姿势,加一位表示当前要填的数有没有限制(感觉以前的写法都太蠢了). 这么写有两个地方要注意: 1.每dp到一位时需要f[i][初始状态]++,相当于这位前都是前导零(这道 ...

  4. bzoj2758【scoi2012】Blinker的的噩梦

    题目描述 一天Blinker醒来,发现自己成为了一个二维世界的点,而且被标记上了一个奇怪的值. 这个世界是由N个边界互不相交(且不相切)的图形组成,这里图形仅包括圆和凸多边形.每个图形还有一个权值.每 ...

  5. API Authentication Error: {"error":"invalid_client","message":"Client authentication failed"}

    解决方法:https://github.com/laravel/passport/issues/221 In your oauth_clients table, do the values you h ...

  6. Python【yagmail】模块发邮件

    #步骤一:import yagmail #步骤二:实例化一个发邮件的对象username = '553637138@qq.com' #邮箱账号pwd='sa2008' #授权码mail = yagma ...

  7. layoutSubviews何时被调用

    layoutSubviews在以下情况下会被调用: 1.init初始化不会触发layoutSubviews 但是是用initWithFrame 进行初始化时,当rect的值不为CGRectZero时, ...

  8. 用nginx搭建简单的文件下载服务器

    server {      listen       80;        #端口      server_name  localhost;   #服务名      charset utf-8; # ...

  9. [USACO07NOV]挤奶的时间Milking Time

    https://daniu.luogu.org/problemnew/show/2889 按右端点从小到大排序后DP dp[i] 到第i个时间段的最大产奶量 不能按左端点排序,第i段由第j段更新时,第 ...

  10. Git之远程库与本地库交互

    对于开发人员而言,有时候在公司干完会到家还得接着干,为了方便同步代码,于是乎,可通过GitHub代码托管平台实现代码云同步. GitHub账号开通.创建远程仓库及初始化等操作此处不做赘述: Git内部 ...