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】慕课网视频学习笔记的更多相关文章

  1. django 我的博客 （慕课网视频）笔记

    用到的命令 1.创建项目 django-admin startproject myBlog 2.创建appcd [项目名] python3 manage.py startapp blog 3.数据迁移 ...

  2. 使用js脚本批量下载慕课网视频

    慕课网(http://www.imooc.com/)上有很多不错的视频,当然我不是来给慕课网打广告的,我本人学习过很多慕课网上的免费的视频. 在线看如果网速慢时,可能会有卡顿,没网时无法观看.所有说下 ...

  3. 慕课网视频破解付费分享-前端开发-Python等

    微信小程序 慕课网   BAT大牛经验总结全面深入解读Android面试   前端JS基础面试技巧   vue2.0+node.js+mongodb全栈打造商城   Vue.js高级实战-开发移动端音 ...

  4. python爬虫:爬取慕课网视频

    前段时间安装了一个慕课网app,发现不用注册就可以在线看其中的视频,就有了想爬取其中的视频,用来在电脑上学习.决定花两天时间用学了一段时间的python做一做.(我的新书<Python爬虫开发与 ...

  5. 教你一步一步用 Node.js 制作慕课网视频爬虫

    转自:http://www.jianshu.com/p/d7631fc695af 开始 这个教程十分适合初学 Node.js 的初学者看(因为我也是一只初学的菜鸟~) 在这里,我就默认大家都已经在自己 ...

  6. React入门基础（学习笔记）

    这篇博客是我通过阅读React官方文档的教程总结的学习笔记,翻译可能存在误差,如有疑问请参见http://reactjs.cn/react/docs/tutorial.html . 一.所需文件 在编 ...

  7. 尚硅谷STRUTS2视频学习笔记

    上一个月一直在学习STRUTS2,学习的是尚硅谷佟刚老师的视频,因为很喜欢佟刚老师的声音,而且他讲的很细,笔记做的也多,基本上是照着他的视频完整的敲了一遍代码,下面就把学习到的知识梳理一遍,最后把项目 ...

  8. 慕客网laravel学习笔记

    session中set方法使用 Session::set('user.username.age','18')嵌套使用得出$user = ['username'=>['age'=>18]]; ...

  9. How to use the Custom Material node and create Metaballs 官方视频学习笔记

    这个视频Youtube没有字幕着实蛋疼,本人英语很渣,几乎听不懂,里面有很多文档没讲的重要信息(文档讲的东西太少了). 不过学习过后你可以解锁好几个姿势.这个视频主要是教你做DistanceField ...

随机推荐

  1. 最新的dubbo和zookeeper整合的问题

    最新的dubbo和zookeeper整合的问题 生活本不易,流人遂自安 博主最新在做小项目练手,在进行dubbo和zookeeper整合的时候遇到了一些问题,在这里这些问题做个小总结吧. 首先需要说明 ...

  2. IDEA快捷键使用说明

    sout :  输出打印语句 System.out.println(); "内容".sout  : 也是打印 System.out.println("内容"); ...

  3. UVA401（回文子串和镜像串）

    可以先设一个常量镜像串,直接返回比较 #include <iostream> #include <string> #include <cstring> #inclu ...

  4. centos 6无法上外网

    1.先配置/etc/sysconfig/network-scripts/ifcfg-eth0 配置完成后能ping通内网.网关,但是上不了外网 DEVICE=eth0 HWADDR=:0C::FF:: ...

  5. 一个简单IOC与DI示例

    1.通过bean工厂实现读取xml文件,并实例化对象,实现自动注入. package com.pri.test; import com.pri.factory.BeanFactory; import ...

  6. Struts2（二）— Result结果配置、Servlet的API的访问、模型驱动、属性驱动

    一.Result结果配置 1.全局和局部结果 ​ 平常我们设置跳转页面,是在action标签里面加上 result标签来控制,这种设置的页面跳转,称之为局部结果页面但是我们有时候在很多个action里 ...

  7. 闲谈：乌云上那些 web-based 的 QQ 漏洞

    0×00 起始 昨日凌晨,看到爱尖刀团队发布了一条“腾讯客户端XSS,已第一时间提交至TSRC”的微博,心想,腾讯又出此类漏洞了.今日,由于有一位名叫“阿布”的同学将该漏洞发布到了乌云,引来不少争吵甚 ...

  8. C# 读写txt文件方法

    添加引用: using System.IO; 1.File类写入文本文件: private void btnTextWrite_Click(object sender, EventArgs e) { ...

  9. 2.MySQL 数据类型

    MySQL 数据类型 MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL支持所有标准S ...

  10. Mysql：1236常见错误

    常见的error 1236 报错一, logevent超过max_allowed_packet 大小 1. Got fatal error 1236 from master when reading ...