react+react-router+antd 栗子:https://github.com/Aquarius1993/reactApp
模块:
1. 引入模块
import React from 'react';
2. 导出组件
export default App;
3. 引用
import App from './APP.jsx';
组件:
1.  结构
class App extends React.Component {}
2. 设置state
用 constructor 代替 getInitialState:
getInitialState() {
return {liked: false};
}
======》
constructor(props) {
super(props);
this.state = {
liked: false
}
}
3. 设置默认Props
class LinkButton extends React.Component {
getDefaultProps() {
return {
name: 'Runoob'
};
} }
=====》
LinkButton.defaultProps = {name: 'Runoob'}
4.  props验证propTypes
propTypes: {
title: React.PropTypes.string.isRequired,
},
======》
LinkButton.propTypes = {title: React.PropTypes.string.required}
5. 事件绑定

<p onClick={this.handelClick}>点我切换状态</p>
=======》
<p onClick={e=>this.handelClick(e)}>点我切换状态</p> 

react 部分ES6写法的更多相关文章

  1. React,React Native中的es5和es6写法对照

    es6用在React中的写法总结: 在es6还没有完全支持到浏览器的阶段里,已经有很多技术人员开始用es6的写法来超前编程了,因为有转义es6语法的工具帮助下,大家才可大量使用.解析看看es6写法用在 ...

  2. 【转】React Native中ES5 ES6写法对照

    很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...

  3. 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

  4. React与ES6(四)ES6如何处理React mixins

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  5. scss + react + webpack + es6

    scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...

  6. react-native ES5与ES6写法对照表

    转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-es5-and-es6-writing-tabl ...

  7. 使用scss + react + webpack + es6实现幻灯片

    写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程 ...

  8. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  9. React与ES6(三)ES6类和方法绑定

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

随机推荐

  1. async 和 await的前世今生 (转载)

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...

  2. resource not found : rosbridge_server

    1.放到src下,改名字为rosbridge_server,编译catkin_make git clone https://github.com/RobotWebTools/rosbridge_sui ...

  3. disable某种警告

    消除警告: #pragma warning(disable:4786) ZC: 需要消除哪种警告,就在上面填写相应的编号 1. 在 VC6中使用vector<string>时,报类似下面的 ...

  4. Qt5.3.2_CentOS6.4_单步调试环境__20160306【勿删,繁琐】

    20160306 全程没有f/q ZC:使用的虚拟机环境是:博客园VMwareSkill 的 “CentOS6.4_x86_120g__20160306.rar” 需要调试器 gdb ,从“http: ...

  5. 关于new和delete

    #include<stdlib.h> #include<iostream> using namespace std; int main(){ int *p=new int; / ...

  6. SQL Timeout超时的处理方法

    第一步:修改Web.config配置文件.在数据库连接字符串中加上连接时间Connect Timeout,根据实际情况定时间. <!--连接数据库--> <connectionStr ...

  7. angular5中使用echart的方法

    注意两点安装的版本 安装好后可以参照echart的官网使用 1.实现package.json中安装这两个包 2.index.html中引入 3.在appModule中添加 然后再html中就可以这么使 ...

  8. HDU-3729 二分匹配 匈牙利算法

    题目大意:学生给出其成绩区间,但可能出现矛盾情况,找出合理组合使没有说谎的人尽可能多,并按maximum lexicographic规则输出组合. //用学生去和成绩匹配,成绩区间就是学生可以匹配的成 ...

  9. android--------自定义Dialog之信息提示

    对话框对于应用也是必不可少的一个组件,在Android中也不例外,对话框对于一些提示重要信息,或者一些需要用户额外交互的一些内容很有帮助. 自定义Dialog步骤: 1.主要创建Java类,并继承Di ...

  10. js下载图片

    DownloadImgZP = imgPath => { const image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('c ...