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 ...
随机推荐
- 【转】关于在vim中的查找和替换
1,查找 在normal模式下按下/即可进入查找模式,输入要查找的字符串并按下回车. Vim会跳转到第一个匹配.按下n查找下一个,按下N查找上一个. Vim查找支持正则表达式,例如/vim$匹配行尾的 ...
- Alpha 冲刺 —— 十分之三
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助后端界面的开发 搭建项目运行的服务器环境 ...
- Linux下cp ~中关于“~”的疑问
目的:将wi主文件夹下的.bashrc复制到/tmp,并更名为bashrc.对于书上的代码上加“~”存在疑问. cp ~/.bashrc /tmp/bashrc 对命令进行了以下尝试: 为什么不加“~ ...
- ThinkPHP 5.x远程命令执行漏洞分析与复现
0x00 前言 ThinkPHP官方2018年12月9日发布重要的安全更新,修复了一个严重的远程代码执行漏洞.该更新主要涉及一个安全更新,由于框架对控制器名没有进行足够的检测会导致在没有开启强制路由的 ...
- linux内核设计与实现一书阅读整理 之第五章
CHAPTER 5 系统调用 5.1 与内核通信 系统调用在用户空间进程和硬件设备之间添加了一个中间层,该层主要作用有三个: 为用户空间提供了一种硬件的抽象接口 系统调用保证了系统的稳定和安全 每个进 ...
- oracle 11g 压缩数据文件
通过以下语句直接分析出每个数据库文件可压缩量 select a.file#, a.name, a.bytes CurrentMB, ceil(HWM ResizeTo, (a.bytes Releas ...
- win10不能被远程解决方案（开启远程桌面，防火墙仍不能被远程解决方案）
开启远程桌面,防火墙仍不能被远程解决方案 1.“Win+R”→“gpedit.msc” 2.依次展开“计算机配置”→“管理模版”→“系统”→“凭据分配”→找到“允许分配保存的凭据用于仅NTLM服务器身 ...
- 「转」图像算法---白平衡AWB
本文大体讲解了白平衡的算法流程,适用于想了解和学习白平衡原理的筒子们. 一般情况下要实现AWB算法需要专业的图像和算法基础,本文力图通过多图的方式,深入浅出,降低初学者理解上的门槛,让大家都理解到白平 ...
- md5sum/opensll md5
http://m.blog.csdn.net/article/details?id=42041329 MD5算法常常被用来验证网络文件传输的完整性,防止文件被人篡改.MD5全称是报文摘要算法(Mess ...
- Docker swarm 使用服务编排部署lnmp
一.简介 目的:在Docker Swarm集群中,使用stack服务编排搭建lnmp来部署WordPress 使用私有仓库的nginx和php镜像 mysql使用dockerhup最新镜像 使用nfs ...