React 、 ES6 - 介绍(第一部分)
这是React和ECMAScript6结合使用系列文章的第一篇。
下面是所有系列文章章节的链接:
自从ReactJS v0.13.0 Beta 1宣布,React 组建可以使用ECMAScript 6 后,它能给我们带来什么好处呢? ECMAScript6 (或者 ECMAScript 2015)是一个新的标准(它从26.06.2015更新,在2015年定稿,它是现在官方的标准-链接),它为JavaScript带来了很多新的特性,例如:classes,arrow functions,rest parameters,iterators,generators … 等更多的新特性。 如果你不是特别熟悉ECMAScript 2015的新特性,我将重点推荐你看看这个链接。 看看ES6的兼容性表,我们会发现不是所有的浏览器都支持ES2015的新特性。幸运的是,你不需要花时间等所有的浏览器都支持ES2015,现在已经有相关的解决方案。你可以使用 Babel是解决方案之一,它真的很神奇的工具。对于作者有太多的感谢。Babel有什么好处呢,Babel支持大量不同的框架,构建系统、测试框架、模板引擎,看这里。 给你一个快速知道babel如何工作的例子。下面就是我们用ECMAScript 6写的例子: var evenNumbers = numbers.filter((num) => num % 2 === 0); 运行babel以后得到下面的代码: var evenNumbers = numbers.filter(function (num) { return num % 2 === 0; }); 同样的方法适用于其它ES6代码到ES5代码的转换。 开发环境配置为了让babel有连续的工作流,我们将使用
如果想要了解更多关于 创建 gulpfile.js在你的根目录下面创建 var gulp = require('gulp'); var browserify = require('browserify'); var babelify = require('babelify'); var source = require('vinyl-source-stream'); gulp.task('build',function () { return browserify({entries: './app.jsx',extensions: ['.jsx'],debug: true}) .transform('babelify',{presets: ['es2015','react']}) .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('dist')); }); gulp.task('watch',['build'],function () { gulp.watch('*.jsx',['build']); }); gulp.task('default',['watch']); 我猜,相关的一些解释将对你有帮助:
典型的工作流将是在终端输入 JSX and Babel你可能已经注意到我们在使用 这是关于JSX更多的信息。 使用ECMAScript 6编写第一个React 组建这个时候希望你多一点耐心 在项目的根目录下面,添加一个 import React from 'react'; class HelloWorld extends React.Component { render() { return <h1>Hello from {this.props.phrase}!</h1>; } } export default HelloWorld; 代码解析:
为了便于理解,你也可以将下面ES5代码将上面文件中的代码替换,你会发现下面的代码就是上面代码的变体,上面是ES6,下面是ES5. import React from 'react'; var HelloWorld = React.createClass({ render: function() { return ( <h1>Hello from {this.props.phrase}!</h1> ); } }); export default HelloWorld; 结束了让我们来结束我们简单的例子。 创建名字为 import HelloWorld from './hello-world'; import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <HelloWorld phrase="ES6"/>,document.querySelector('.root') ); 这里我们导入上面创建的组建 下一步,我们来创建 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>ReactJS and ES6</title> </head> <body> <div class="root"></div> <script src="dist/bundle.js"></script> </body> </html> 现在在终端运行 参考文档
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |