React 学习二 组件
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 学习二 组件的更多相关文章
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- 【react学习二】create-react-app 接入antd 并按需加载组件
1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": ...
- AntDesign(React)学习-15 组件定义、connect、interface
虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- react学习(二)之通信篇
react性能提升原理:虚拟DOM react把真是的DOM tree,转化成virtual DOM,每次数据更新后,重新计算virtual DOM并与上一次的作对比,然后对发生改变的部分进行批量更新 ...
- React 学习(二) ---- props验证与默认属性
在上一节中, 我们提到了props, 组件之间数据的传递使用props. 我们调用组件时可以设置props, 组件内部通过props获取. 为了props 使用更加友好, React 提供了简单的验证 ...
- react学习二 生命周期
转自:https://www.cnblogs.com/gdsblog/p/7348375.html react 中compent getDefaultProps object getDefaultPr ...
- React学习——子组件给父组件传值
//子组件 var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:<input onCha ...
- React学习——ListView组件
(草稿) 先把代码放上来,再补充说明 <!DOCTYPE html> <html> <head> <title>React ListView</t ...
随机推荐
- 【spoj NSUBSTR】 Substrings
http://www.spoj.com/problems/NSUBSTR/ (题目链接) 题意 给出一个字符串S,令${F(x)}$表示S的所有长度为x的子串出现次数的最大值.求${F(1)..... ...
- 【费用流】【网络流24题】【P4013】 数字梯形问题
Description 给定一个由 \(n\) 行数字组成的数字梯形如下图所示. 梯形的第一行有 \(m\) 个数字.从梯形的顶部的 \(m\) 个数字开始,在每个数字处可以沿左下或右下方向移动,形成 ...
- MVC使用jQuery从视图向控制器传递Model的2种方法
http://blog.csdn.net/make1828/article/details/29846003 using System.ComponentModel.DataAnnotations; ...
- mysql 优化之查询缓存(mysql8已经废弃这个功能)
对于缓存,一般人想到的是 redis.memcache 这些内存型的缓存. 但是实际上 mysql 也提供了缓存,mysql 里面的缓存是查询缓存,可以把我们查询过的语句缓存下来,下一次查询的时候有可 ...
- Hadoop生态圈-使用phoenix的API进行JDBC编程
Hadoop生态圈-使用phoenix的API进行JDBC编程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.
- KVM管理概述
一.使用QEMU管理虚拟机 1.KVM指南 https://activedoc.opensuse.org/book/opensuse-virtualization-with-kvm/part-iii- ...
- 转：实现OC与JS的简易交互
oc-->js stringByEvaluatingJavaScriptFromString,其参数是一NSString 字符串内容是js代码(这又可以是一个js函数.一句js代码或他们的组合) ...
- UIView的alpha属性和hidden属性
alpha 属性为0.0时视图完全透明,为1.0时视图完全不透明. hidden属性为YES时视图隐藏,否则不隐藏. 注意事项: 1 当视图完全透明或者隐藏时,不能响应触摸消息. 也就是alpha等于 ...
- linux shell 获取当前日期/时间
1. 当前日期 [root@Tomcat DFJR-ERP]# cur_date="`date +%Y-%m-%d`" [root@Tomcat DFJR-ERP]# echo $ ...
- PyQt4 里的表格部件的使用方法: QTableWidget
PyQt4 里的表格部件的使用方法: QTableWidget QT下QTableWidget使用方法小结 - - 博客频道 - CSDN.NET http://blog.csdn.net/jingz ...