ReactJS学习系列课程(React ES6语法使用)

前端之家收集整理的这篇文章主要介绍了ReactJS学习系列课程(React ES6语法使用)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

自从ES6发布以来,越来越多的人开始追捧这一崭新的语法,丰富的语义化方法,简介的符号说明,吸引了很多人,虽然目前ES6的语法还不被广大浏览器支持,仍需要用babel转化使用,但是ES6仍是一个不错的选择。

那么,如果我们就想用ES6的语法定义React该如何去编写呢?

首先我们用ES6定义个React组件尝试一下,上代码

import React,{ PropTypes,Component } from 'react';

class Header extends Component {
  handleSave(text) {

  }

  render() {
    return (
      <header className="header">
          <h1>todos</h1>
      </header>
    );
  }
}

export default Header;

ES6支持import方法导入功能,这点很想java语法,个人很喜欢,假设大家已经通过npm安装好所有依赖库,为了方便起见,我就附上我自己的package.json 文件吧!如下,可以拷贝,自行安装:

{
  "name": "demo4","version": "1.0.0","description": "","scripts": { "start": "webpack-dev-server --progress --colors --hot --inline -d","build": "webpack --progress --colors --minify" },"license": "ISC","dependencies": { "classnames": "2.1.2","react": "0.13.3","react-redux": "2.1.2","redux": "3.0.0" },"devDependencies": { "babel-core": "5.6.18","babel-loader": "5.1.4","node-args": "1.0.2","raw-loader": "0.5.1","style-loader": "0.12.3","todomvc-app-css": "2.0.1","webpack": "1.9.11","webpack-dev-server": "1.11.0" } }

所有的准备就绪以后,我们正常导入react核心库,propTypes,Component,propTypes是用来做属性约束的,前面我们已经讲过了,Component是创建组件必须的类库,上面创建了一个Header组件,需要继承Component,并复写render方法,创建相应的Element,在类的内部我们同样定义了一个function,处理相应的组件操作。

最后我们export 自己定义的组件类,语法是export default Header.

上面就是ES6语法的React,还有一些定义,都是大同小异,大家可以参考学习。

谢谢!

原文链接:https://www.f2er.com/react/306552.html

猜你在找的React相关文章