【react】慕课网视频学习笔记
1.JSX：语法糖，对语言的功能并没有影响，但更方便程序员使用，增强可读性。
2.jsFiddle：前端在线调试工具
3.为什么要把this额外声明成_self变量，因为window.setTimeout中的函数内部this指向的是global对象，所以需要在之前保存this变量。
也可以利用apply、call、bind修改this指向。
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
);
4.实现按钮、输入框的联动
ref属性，找DOM节点时，用refs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var TestClickComponent = React.createClass({
handleClick:function(event){
var tipE = ReactDOM.findDOMNode(this.refs.tip);
if(tipE.style.display === "none"){
tipE.style.display = "inline";
}else{
tipE.style.display = "none";
}
event.stopPropagation();
event.preventDefault();
},
render:function(){
return (
<div>
<button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>
</div>
);
}
});
var TestInputComponent = React.createClass({
getInitialState:function(){
return {
inputContent : ""
}
},
handletextInput:function(event){
this.setState({
inputContent:event.target.value
});
},
render:function(){
return (
<div>
<input type="text" onChange={this.handletextInput} /><span>{this.state.inputContent}</span>
</div>
);
}
}); ReactDOM.render(
<div>
<TestClickComponent />
<TestInputComponent />
</div>
,document.getElementById("container")) </script>
</body>
</html>
5.父组件、子组件之间的值传递
【react】慕课网视频学习笔记的更多相关文章
- django 我的博客 （慕课网视频）笔记
用到的命令 1.创建项目 django-admin startproject myBlog 2.创建appcd [项目名] python3 manage.py startapp blog 3.数据迁移 ...
- 使用js脚本批量下载慕课网视频
慕课网(http://www.imooc.com/)上有很多不错的视频,当然我不是来给慕课网打广告的,我本人学习过很多慕课网上的免费的视频. 在线看如果网速慢时,可能会有卡顿,没网时无法观看.所有说下 ...
- 慕课网视频破解付费分享-前端开发-Python等
微信小程序 慕课网 BAT大牛经验总结全面深入解读Android面试 前端JS基础面试技巧 vue2.0+node.js+mongodb全栈打造商城 Vue.js高级实战-开发移动端音 ...
- python爬虫:爬取慕课网视频
前段时间安装了一个慕课网app,发现不用注册就可以在线看其中的视频,就有了想爬取其中的视频,用来在电脑上学习.决定花两天时间用学了一段时间的python做一做.(我的新书<Python爬虫开发与 ...
- 教你一步一步用 Node.js 制作慕课网视频爬虫
转自:http://www.jianshu.com/p/d7631fc695af 开始 这个教程十分适合初学 Node.js 的初学者看(因为我也是一只初学的菜鸟~) 在这里,我就默认大家都已经在自己 ...
- React入门基础（学习笔记）
这篇博客是我通过阅读React官方文档的教程总结的学习笔记,翻译可能存在误差,如有疑问请参见http://reactjs.cn/react/docs/tutorial.html . 一.所需文件 在编 ...
- 尚硅谷STRUTS2视频学习笔记
上一个月一直在学习STRUTS2,学习的是尚硅谷佟刚老师的视频,因为很喜欢佟刚老师的声音,而且他讲的很细,笔记做的也多,基本上是照着他的视频完整的敲了一遍代码,下面就把学习到的知识梳理一遍,最后把项目 ...
- 慕客网laravel学习笔记
session中set方法使用 Session::set('user.username.age','18')嵌套使用得出$user = ['username'=>['age'=>18]]; ...
- How to use the Custom Material node and create Metaballs 官方视频学习笔记
这个视频Youtube没有字幕着实蛋疼,本人英语很渣,几乎听不懂,里面有很多文档没讲的重要信息(文档讲的东西太少了). 不过学习过后你可以解锁好几个姿势.这个视频主要是教你做DistanceField ...
随机推荐
- 0/1背包问题（DP）
Description 给定 n 个物品和一个背包.物品 i 的重量是 wi ,其价值为 vi ,背包的容量为 C .问:应该如何选择装入背包的物品,使得装入背包中物品的总价值最大? Input 输入 ...
- [C语言] 数据结构概述
1.数据结构概述 定义 我们如何把现实中大量而复杂的问题以特定的数据类型和特定的存储结构保存到主存储器(内存)中, 以及在此基础上为实现某个功能(比如查找.删除.查找.某个元素,对所有元素进行排序)而 ...
- 一个JNI的helloworld小demo
最近想学习一下jni,在网上看了一些demo,自己也操作了一遍,首先我将我自己学习的demo网站贴出来:https://blog.csdn.net/lwcloud/article/details/78 ...
- 4 springboot 集成swagger2
Swagger:实时生成在线接口文档,方便测试和沟通 官网地址:https://swagger.io/ 引入依赖 <dependency> <groupId>io.spring ...
- 使用jQuery的validation插件实现表单校验
前端表单校验: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Java集合 之Map(HashMap、Hashtable 、TreeMap、WeakHashMap )理解（new）
HashMap 说明: 在详细介绍HashMap的代码之前,我们需要了解:HashMap就是一个散列表,它是通过“拉链法”解决哈希冲突的.还需要再补充说明的一点是影响HashMap性能的有两个参数:初 ...
- Maven学习总结（七）：Maven的聚合和继承
一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 1 <modules> 2 <module>模块一</module&g ...
- AngularJS+RequireJs实现动态加载JS和页面的方案研究【下】
about.js: [html] view plain copy 在CODE上查看代码片派生到我的代码片 define(['app'], function(app) { app.controller( ...
- Google Map API V3调用arcgis发布的瓦片地图服务
由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...
- jquery 之节点操作
一.添加节点 [添加内部子节点方法]:内部节点就是儿子节点 append() 在被选元素内部的结尾插入内容 appendTo() 将指定内容插入到被选标签内部的结尾 prepend() 在 ...