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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Hello React!</title>
  6.     <script src="../src/react-0.14.3/build/react.js"></script>
  7.   <script src="../src/react-0.14.3/build/react-dom.js"></script>
  8.     <script src="../src/react-0.14.3/build/browser.min.js"></script>
  9.   </head>
  10.   <body>
  11.     <div id='header'>
  12.     </div>
  13.     <hr  style="clear:both" />
  14.     <div id="body">
  15.       <div> Hi this is test page</div>
  16.     </div>
  17.     <hr />
  18.     <div id="footer"></div>
  19.     <script type="text/babel">
  20.     var JMFooter = React.createClass({
  21.       render: function() {
  22.         return (
  23.             <div className="footer">
  24.               <a href="/AboutUS.aspx">关于博客园</a>
  25.               <a href="/ContactUs.aspx">联系我们</a>
  26.               ©2004-2015<a href="http://www.cnblogs.com/">博客园</a>
  27.               保留所有权利
  28.               <a href="http://www.miitbeian.gov.cn" target="_blank">沪ICP备09004260号</a>
  29.             </div>
  30.         );
  31.       }
  32.     });
  33.  
  34.     var JMHeader = React.createClass({
  35.       render: function(){
  36.         return <div><div style={{color:'red'}}><h1 >Jimson Blog</h1></div><h3>今天是{this.props.date} </h3></div>;
  37.       }
  38.     })
  39.     ReactDOM.render(
  40.       <JMHeader date={(new Date).toDateString()} style={"float:left"}/>,
  41.       document.getElementById('header')
  42.       );
  43.     ReactDOM.render(
  44.        <JMFooter />,
  45.       document.getElementById('footer')
  46.     );
  47.  
  48.     </script>
  49.   </body>
  50. </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. 【poj2411】 Mondriaan's Dream

    http://poj.org/problem?id=2411 (题目链接) 题意 一个$n*m$的网格,用$1*2$的方块填满有多少种方案. Solution 轮廓线dp板子.按格dp,对上方和左方的 ...

  2. Raven: 2靶机入侵

    0x00 前言 Raven 2是一个中等难度的boot2root 虚拟靶机.有四个flag需要找出.在多次被攻破后,Raven Security采取了额外措施来增强他们的网络服务器安全以防止黑客入侵. ...

  3. mysql INNER/LEFT/RIGHT JOIN区别

    1.创建table DROP TABLE IF EXISTS `tab_id_index`; CREATE TABLE `tab_id_index` ( `id` ) ', `name` ) DEFA ...

  4. Android L开发指南

    导语:Android下一代操作系统“ L”对开发者意味着什么?ART模式能否让应用的体验超越苹果? 刚刚结束的 Google I/O大会上,Android下一代操作系统“ L”带来不少惊喜.新系统运行 ...

  5. 轻量高效的开源JavaScript插件和库 【转】

    图片 布局 轮播图 弹出层 音频视频 编辑器 字符串 表单 存储 动画 时间 其它 加载器 构建工具 测试 包管理器 CDN 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果 ...

  6. 解题：POI 2009 Ticket Inspector

    题面 看起来很水,然而不会DP的蒟蒻并不会做,PoPoqqq orz 设$f[i][j]$表示当前在第$i$个点和第$i+1$个点之间查票,已经查了$j$次的最大收益.然后就是那种很常见的枚举前一个结 ...

  7. C+＋并发类成员函数调用（练习1）

    一般类成员函数开线程格式 std::thread t1(&类名::函数,&实例化对象,参数....) ||std::thread t1(std::bind(&&类名:: ...

  8. 【题解】Arpa's letter-marked tree and Mehrdad's Dokhtar-kosh paths Codeforces 741D DSU on Tree

    Prelude 很好的模板题. 传送到Codeforces:(*￣3￣)╭ Solution 首先要会DSU on Tree,不会的看这里:(❤ ω ❤). 众所周知DSU on Tree是可以用来处 ...

  9. iperf测试网络性能

      分类: LINUX 2013-06-17 18:52:21     Iperf是一个网络性能测试工具.可以测试TCP和UDP带宽质量,可以测量最大TCP带宽,具有多种参数和UDP特性,可以报告带宽 ...

  10. python数据结构（1）

    四种内建的数据结构:List.Tuple.Dictionary以及Set. 1.列表 列表是可变的,这是它区别于字符串和元组的最重要的特点,一句话概括即:列表可以修改,而字符串和元组不能. (1).创 ...