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. scala 的安装 与 IDEA安装使用

    一.安装 scala 1.下载scala-2.11.8.msi 安装包,   首先去官网http://www.scala-lang.org/,然后点击导航栏的DOWNLOAD,进入下载链接:http: ...

  2. js 弹出新页面，避免被浏览器、ad拦截的一种办法

    以绑定click弹窗的方式,改为普通的链接,即 a[target=_blank],在点击打开新窗口之前,修改其href. 绑定mousedown,鼠标点击执行完成前修改href. 绑定focus,保证 ...

  3. Angular http跨域

    原文:Angular http跨域 - 飞翔的小仓鼠 - 博客园 var app = angular.module('Mywind',['ui.router']); app.controller('M ...

  4. svn断开链接后，重新share提交代码报错

    前言:svn怎样断开链接并清除干净请查看此地址-->android studio中断开SVN连接,并彻底清理项目中的.svn文件 1.每次把项目重新关联到新的svn地址上,我都抓狂一样的烦躁,因 ...

  5. nginx让用户通过用户名密码认证访问web页面

    在使用nginx转发的时候,要进行一次用户身份的确认. 1)通过htpasswd命令生成用户名及对应密码数据库文件. [root@bgs-5p173-wangwenting ~]# htpasswd ...

  6. python lambda表达式与三元运算

    1.三元运算 格式: 为真时的结果 if 判定条件 else 为假时的结果 #!/usr/bin/python # -*- coding: UTF-8 -*- def f(x, y): # 如果x大于 ...

  7. NO.2day 操作系统基础

    操作系统基础 1.为什么要有操作系统 操作系统为用户程序提供一个更好.更简单.更清晰的计算机模型,并管理刚才提到的所有设备(磁盘.内存.显示器.打印机等).程序员无法把所有的硬件操作细节都了解到,管理 ...

  8. 二维数组和指针(C语言）

    二维数组和指针 二维数组和指针1.二维数组和数组元素的地址若有以下定义:int *p, a[3][4]; 1)二维数组a由若干个一维数组组成在C语言中定义的二维数组实际上是一个一维数组,这个一维数组的 ...

  9. 优先队列：POJ No 3614 Sunscreen 贪心

    Sunscreen Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6410   Accepted: 2239 Descrip ...

  10. Hbase建模选择

    日期 2017年3月17日 HBase建模记录 OLTP 应用场景: OLAP 应用场景: 语音分析系统的应用场景 基于HBase的建模考虑 1.话单为主来考虑hbase的rowkey的生成规则: 1 ...