React 、 ES6 - 介绍（第一部分）_ES2015(es6)

上一篇: ES6新特性之箭头函数与function的... 下一篇:ES6/ES7 三点式 —— 扩展运算符...

React 、 ES6 - 介绍（第一部分）

发布时间：2019-08-09 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了React 、 ES6 - 介绍（第一部分），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

这是React和ECMAScript6结合使用系列文章的第一篇。
本文出自从零到壹全栈部落
下面是所有系列文章章节的链接：

React 、 ES6 - 介绍（第一部分）
React类、ES7属性初始化（第二部分）
React类，方法绑定（第三部分）
ES6中React Mixins的使用（第四部分）
React 和ES6 之JSPM的使用（第五部分）
React 和 ES6 工作流之 Webpack的使用（第六部分）

本篇文章Github源码


React
JS






自从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，现在已经有相关的解决方案。你可以使用transpilers将ES2015的代码转换成ES5。这很类似于在JavaScript中如何将CoffeeScript转换成Coffee code。
Babel是解决方案之一，它真的很神奇的工具。对于作者有太多的感谢。Babel有什么好处呢，Babel支持大量不同的框架，构建系统、测试框架、模板引擎，看这里。
给你一个快速知道babel如何工作的例子。下面就是我们用ECMAScript 6写的例子：

      
      
      === 0);" title="" data-original-title="复制">
      
      
VAR evenNumbers = numbers.filter((num) => num % 2 === 0);
运行babel以后得到下面的代码：

      
      
      
      
      
var evenNumbers = numbers.filter(function (num) {
    return num % 2 === 0;
});
同样的方法适用于其它ES6代码到ES5代码的转换。
开发环境配置
为了让babel有连续的工作流，我们将使用Gulp。这是基于nodejs的任务构建工具，可以自动改善繁琐的任务。

明显，你需要安装nodejs，如果你没有安装，需要在你系统上安装nodejs。
下一步，你将需要安装全局的Gulp:npm install --g gulp。
创建一个空文件夹，切换到这个文件夹中，在终端输入npm init初始化你的package.json。
运行npm install --save react react-dom,这将安装react和react-dom到你的node_modules文件夹并且作为依赖库保存到package.json文件中。
运行npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react,这将安装更多的依赖到你的node_modules文件夹。

如果想要了解更多关于step 5中的内容，请移步：my article about Browserify, Babelify and ES6
创建 gulpfile.js
在你的根目录下面创建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']);
我猜，相关的一些解释将对你有帮助：

Lines 1-4. 我们需要安装node.js modules并且将他们赋值给变量。
Line 6. 我们定义gulp任务名为build以便我们可以使用gulp build来运行。
Line 7. 我们开始描述我们的构建任务将做什么。我们告知Gulp来使用app.jsx。我们打开调试模式，这有利于我们开发调试。
Lines 8-11. 我们应用Babelify来转换我们的代码。这允许我们将ECMAScript6转换成ECMAScript5。下一步我们将结果输出到dist/bundle.js文件。这几行代码现在使用了Babel 6 中叫做presets的新特性。
Lines 14-16. 我们定义一个名字叫做watch的任务以便我们能够通过gulp watch来运行。无论什么时候jsx文件内容发生变化，这个任务都会重新进行编译。
Line 18. 我们定义默认的gulp任务以便我们输入gulp时自动运行，此任务只执行监视任务。

典型的工作流将是在终端输入gulp然后按下enter键。它将连续的监听react组建中代码的变化。
JSX and Babel
你可能已经注意到我们在使用.jsx代替.js语法。JSX是ReactJS团队研发的JavaScript扩展语法。这个格式对于ReactJS的开发更加方便快捷。
这是关于JSX更多的信息。
使用ECMAScript 6编写第一个React 组建
这个时候希望你多一点耐心
在项目的根目录下面，添加一个hello-world.jsx文件，并且在文件中code下面的代码。这是我们用ES6编写的第一个非常简单的React组建。

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React From 'react';

class HelloWorld extends React.component {
    render() {
        return Hello from {this.props.phrase}!;
    }
}

export default HelloWorld;" title="" data-original-title="复制">
      
      
import React from 'react';

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello from {this.props.phrase}!</h1>;
    }
}

export default HelloWorld;
代码解析：

Line 1. 导入React库并且将它存到变量React中。
Lines 3-8. 使用ES6创建继承自React.COMponent的类.
我们添加非常简单的render方法并且return一个包含phrase属性的<h1>标签。
Line 9. 使用export default HelloWorld将创建的组建导出以便在其它地方能够正常导入使用。

为了便于理解，你也可以将下面ES5代码将上面文件中的代码替换，你会发现下面的代码就是上面代码的变体，上面是ES6，下面是ES5.

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React from 'react';

var HelloWorld = React.createClass({
    render: function() {
        return (
            Hello from {this.props.phrase}!
        );
    }
});

export default HelloWorld;" title="" data-original-title="复制">
      
      
import React from 'react';

var HelloWorld = React.createClass({
    render: function() {
        return (
            <h1>Hello from {this.props.phrase}!</h1>
        );
    }
});

export default HelloWorld;
结束了
让我们来结束我们简单的例子。
创建名字为app.jsx的文件。

      
      
      DOM from 'react-dom';

ReactDOM.render(
    ,
    document.querySelector('.root')
);" title="" data-original-title="复制">
      
      
import HelloWorld from './hello-world';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <HelloWorld phrase="ES6"/>,
    document.querySelector('.root')
);
这里我们导入上面创建的组建HelloWorld并且将HelloWorld创建了对象并且设置phrase属性。请注意，这里我们使用特殊的库ReactDOM来渲染HelloWorld组建。
下一步，我们来创建index.htML.

      
      
      
      
      
<!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>
现在在终端运行gulp命令(它将创建dist/bundle.js文件)并且在浏览器中打开index.html，运行效果如下：

参考文档

Classes in ECMAScript 6
Exploring ES6, e-book
BabelJS
An Introduction to Gulp.js
JSX in Depth


扫码申请加入全栈部落

脚本宝典总结

以上是脚本宝典为你收集整理的React 、 ES6 - 介绍（第一部分）全部内容，希望文章能够帮你解决React 、 ES6 - 介绍（第一部分）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：all all babel break break button button char char Class default default div do document DOM ECMAScript es6 export export export extends final for for form form function function function if Import in in int java JSX name name node Number package package post-format-gallery React ReactJS reset reset return return return select static static static this true undefined undefined var

上一篇: ES6新特性之箭头函数与function的... 下一篇:ES6/ES7 三点式 —— 扩展运算符...

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

全站导航更多

最新ES2015(es6)教程

热门ES2015(es6)教程