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

pingink 发布于2019-08-20 17:59 / 507人阅读

摘要：下一步我们将结果输出到文件。这是我们用编写的第一个非常简单的组建。使用将创建的组建导出以便在其它地方能够正常导入使用。

这是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写的例子：

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组建。

import React from "react";

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

export default HelloWorld;

代码解析：

Line 1. 导入React库并且将它存到变量React中。

Lines 3-8. 使用ES6创建继承自React.Component的类.
我们添加非常简单的render方法并且return一个包含phrase属性的

标签。

Line 9. 使用export default HelloWorld将创建的组建导出以便在其它地方能够正常导入使用。

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

import React from "react";

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

export default HelloWorld;

结束了

让我们来结束我们简单的例子。

创建名字为app.jsx的文件。

import HelloWorld from "./hello-world";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    ,
    document.querySelector(".root")
);

这里我们导入上面创建的组建HelloWorld并且将HelloWorld创建了对象并且设置phrase属性。请注意，这里我们使用特殊的库ReactDOM来渲染HelloWorld组建。

下一步，我们来创建index.html.




    
    ReactJS and ES6

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

参考文档

Classes in ECMAScript 6

Exploring ES6, e-book

BabelJS

An Introduction to Gulp.js

JSX in Depth

扫码申请加入全栈部落

GPU云服务器云服务器第一部分 ES6 es6-系列 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83984.html

React类、ES7属性初始化（第二部分）

摘要：组建属性初始化默认值类型在中将下面的代码替换成下面的代码最后一步将初始状态从构造函数中转变成属性初始化。在构造函数的后天添加正确的代码你需要把状态初始化代码从构造函数中删除。这是React和ECMAScript6结合使用系列文章的第二篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类，方法绑定...

VioletJack 2019-08-20 17:59 评论0 收藏0
React类，方法绑定（第三部分）

摘要：使用箭头函数和构造函数当方法被调用时，会保留上下文。我们能使用这个特征用下面的方法在构造函数中重定义函数。在调用方法的方使用函数绑定语法你也可以直接在非构造函数里面的里面直接使用函数绑定。这是React和ECMAScript6／ECMAScript7结合使用系列文章的第三篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始...

livem 2019-08-20 17:59 评论0 收藏0
ES6中React Mixins的使用（第四部分）

摘要：在的组建创建中，不太可能使用混合机制。在中，这个组建将被命名为。他们中的其中一个如下结论高阶组建功能强大和极具表现力。现在高阶组建广泛的被使用来替代老式的句法。这是React和ECMAScript6／ECMAScript7结合使用系列文章的第四篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类...

Karrdy 2019-08-20 17:59 评论0 收藏0
前端练级攻略(第二部分)

摘要：是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分，你将更好地理解并使用它们。到目前为止，你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。本文是前端练级攻略第二部分，第一部分请看下面：前端练级攻略(第一部分) 在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如...

BWrong 2019-08-23 16:49 评论0 收藏0
React 和ES6 之JSPM的使用（第五部分）

摘要：让为生产研发的使用准备相关文件变得更容易。在这篇文章中，我们将重新创建和之前一样的新的项目，但是我们使用。让我们安装其它我们将要使用的依赖包在这里我们没有使用或者前缀，因为有常用包的注册表。这是React和JSPM结合使用系列文章的第五篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类，方法绑...

zzbo 2019-08-20 17:59 评论0 收藏0