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. Subsets II - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Subsets II - LeetCode 注意点 有重复的数字 数组可能是无序的,要先排序 解法 解法一:递归,只需要在Subsets中递归写法的基础上 ...

  2. C++中unique函数

    目录 介绍 用法举例 数组 vector 介绍 unique是STL比较实用的一个函数.用于"去除"容器内相邻的重复的元素(只保留一个).这里说的去除并不是真正将容器内的重复元素删 ...

  3. BZOJ2800 [Poi2012]Leveling Ground 【扩展欧几里得 + 三分 + 堆】

    题目链接 BZOJ2800 题解 区间加极难操作,差分之后可转化为两点一加一减 那么现在问题就将每个点暂时独立开来 先判定每个点是否被\((A,B)\)整除,否则无解 之后我们先将\(A,B\)化为互 ...

  4. 洛谷 P1939 【模板】矩阵加速（数列） 解题报告

    P1939 [模板]矩阵加速(数列) 题目描述 a[1]=a[2]=a[3]=1 a[x]=a[x-3]+a[x-1] (x>3) 求a数列的第n项对1000000007(10^9+7)取余的值 ...

  5. Linux kernel（CVE-2018-17182）提权漏洞复现

    0x01 漏洞前言 Google Project Zero的网络安全研究人员发布了详细信息,并针对自内核版本3.16到4.18.8以来Linux内核中存在的高严重性漏洞的概念验证(PoC)漏洞利用.由 ...

  6. CVE-2018-1111劫持dhcp造成centos代码执行漏洞

    0x01 漏洞概述 近日,红帽官方发布了安全更新,修复了编号为CVE-2018-1111的远程代码执行漏洞,攻击者可以通过伪造DHCP服务器发送响应包,攻击红帽系统,获取root权限并执行任意命令. ...

  7. Linux编程中 #define _XOPEN_SOURCE的作用

    [误解]#define _XOPEN_SOURCE决不是简单的宏定义它是使程序符合系统环境的不可缺少的部分 [概念]Glibc 所实现全部或部分规范下的功能有:1.ISO C: C语言国际标准. 2. ...

  8. android studio 卡慢的问题(android studio 3.0)

    http://www.jianshu.com/p/0228b7d017bb 想体验一下android studio 3.0的canary版,主要是学习Kotlin.创建项目后,下载相关文件一直不成功. ...

  9. UDP ------ UDP 详解

    原文地址:https://zhuanlan.zhihu.com/p/25622691 3. UDP疑难杂症 3.1 UDP的传输方式:面向报文 面向报文的传输方式决定了UDP的数据发送方式是一份一份的 ...

  10. 编程语言教程书该怎么写: 向K&R学习！

    原文地址:Lax Language TutorialsAndrew Binstock 每年在评审Jolt Awards图书的时候,我都会被一些语言教程类图书弄得心力交瘁.从这些年的评审经验来看,这些语 ...