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. 【ARC074e】RGB sequence

    Description ​ 一排\(n\)个格子,每个格子可以涂三种颜色的一种.现在给出\(m\)个形如"\([l,r]\)中必须恰好有\(x\)种颜色"的限制(\(1 \le l ...

  2. BZOJ5058 期望逆序对 【矩乘 + 组合数学 + 树状数组】

    题目链接 BZOJ5058 题解 可以发现任意两个位置\(A,B\)最终位置关系的概率是相等的 如果数列是这样: CCCCACCCCBCCCC 那么最终有\(7\)种位置关系 \((A,B)\) \( ...

  3. xml的相关知识

  4. BUG1 解决java compiler level does not match the version of the installed java project facet

    因工作的关系,Eclipse开发的Java项目拷来拷去,有时候会报一个很奇怪的错误.明明源码一模一样,为什么项目复制到另一台机器上,就会报“java compiler level does not m ...

  5. SenseTime Ace Coder Challenge 暨 商汤在线编程挑战赛 A. 地铁站

    //其实比赛的时候就想到这方法了,但看到数据太吓人,就没写//看着标程,实际上就是这方法,太坑爹…… /* 假设值为k,对于图中任意两点,圆1半径k/t1,圆2半径k/t2 圆1与圆2的交集为可以设置 ...

  6. HDU--4764

    题目: Stone 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4764 #include<iostream> #include<c ...

  7. Chapter 6(树)

    1.树的储存方式 //****************双亲表示法************************ #define Max_TREE_SIZE 100 typedef int TElem ...

  8. IL指令集

    声明: 1.本指令集搜集自网上各个论坛帖子,欢迎补充 IL指令集 名称 说明     Add 将两个值相加并将结果推送到计算堆栈上.     Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推 ...

  9. 队列,event,multiprocess

    队列:queue queue is especially useful in threaded programming when information must be exchanged safel ...

  10. C++ 注册表编程

    原文 C++ 注册表编程 1.基础知识 注册表的组织方式跟文件目录比较相似,主要分为根键.子键和键值项三部分,与文件目录对应的话就是根目录.子目录和文件.分别介绍一下这三部分: (1)根键.分为5个, ...