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. CSU1911 Card Game 【FWT】

    题目链接 CSU1911 题解 FWT模板题 #include<algorithm> #include<iostream> #include<cstdlib> #i ...

  2. Java之使用链表实现队列

    import java.util.Iterator; import java.util.NoSuchElementException; /** * 使用链表来实现队列 * 1.考虑结点的结构,包括当前 ...

  3. 解题：SHOI 2012 回家的路

    题面 完了,做的时候已经想不起来分层图这个东西了QAQ 对于这种“多种”路径加中转站的题,还有那种有若干次“特殊能力”的题,都可以考虑用分层图来做 显然只需要记录所有的中转站+起点终点,然后拆出横竖两 ...

  4. 实用 zsh 插件

    zsh 命令补全插件 zsh-users/zsh-autosuggestions laravel5(使用前提:安装了 oh-my-zsh) 使用方法,修改 ~/.zshrc,在 plugins 里面加 ...

  5. golang interface 类型变量当作某个具体类型使用

    比如,我们定义了一个 struct type person struct { Name string `json:"name"` Age int `json:"age&q ...

  6. hihocoder #1162 矩阵加速dp

    #1162 : 骨牌覆盖问题·三 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 前两周里,我们讲解了2xN,3xN骨牌覆盖的问题,并且引入了两种不同的递推方法.这一次我 ...

  7. GO_06：GO语言基础之struct

    结构struct 1. Go 中的struct与C中的struct非常相似,并且Go没有class 2. 使用 type <Name> struct{} 定义结构,名称遵循可见性规则(即首 ...

  8. Linux查看服务器公网ip的方法

    在解决网络问题时,需要查看本机的出口公网IP信息,有如下两个方法: curl ifconfig.me 在linux系统中输入上述的命令,可以查看到本机连接的公网信息: 如果该命令无效,可以使用下面一个 ...

  9. Interval GCD

    题目描述 给定一个长度为N的数列A,以及M条指令 (N≤5*10^5, M<=10^5),每条指令可能是以下两种之一:“C l r d”,表示把 A[l],A[l+1],…,A[r] 都加上 d ...

  10. NOIP2012 提高组 Day 1

    期望得分:100+100+70=270 实际得分:100+50+70=220 T2 没有底 最后剩余时间来不及打高精.思路出现错误 T1 Vigenère 密码 题目描述 16 世纪法国外交家 Bla ...