React和ES6 - 第1部分，简介

最新推荐文章于 2022-07-18 20:56:52 发布

li_bing_

最新推荐文章于 2022-07-18 20:56:52 发布

阅读量447

点赞数

分类专栏： react 文章标签： react

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原文：http://egorsmirnov.me/2015/05/22/react-and-es6-part1.html

这是系列的第一篇文章，其中我们将探讨React与ECMAScript6的用法。

GitHub上提供了与本文相对应的代码。

自从ReactJS v0.13.0 Beta 1发布以来，可以将ECMAScript 6的功能用于您的React组件。它给开发者带来了什么好处？

ECMAScript6（或ECMAScript 2015）是新标准，它将大量新功能带入JavaScript世界。这样的功能包括类(classes)，箭头函数(arrow functions)，剩余参数(rest parameters)，迭代器(iterators)，生成器(generators )......等等。

如果您不熟悉ECMAScript 2015的新功能，我强烈建议您使用此链接进行操作。

通过查看ES6兼容性表，我们可以注意到并非所有浏览器都支持ES2015的每个功能。幸运的是，在供应商将ECMAScript 6功能发布到浏览器之前，您不必花费多少时间。已有的解决方案称为转换器，它将您用ES6编写的代码转换为ES5兼容代码。这与CoffeeScript将您的Coffee代码转换为JavaScript的方式非常相似。

其中一个解决方案是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语言结构。

准备开发环境

为了与babel建立连续的工作流程，我们将使用Gulp。这是在node.js之上构建的任务运行器，它可以通过自动执行繁琐的任务来改善您的操作。如果你了解Grunt，那么Gulp也有同样的目的。

显然，你需要node.js. 如果您没有它，请将其安装在您的系统上。
接下来，您需要全局安装Gulp : npm install --g gulp.
切换到项目的目录。package.json通过使用npm init初始化您的文件。
执行npm install --save react react-dom。这会将reactnpm模块安装到您的node_modules文件夹中，并将React库保存为package.json文件中的依赖项。
执行npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react。这将为您安装更多开发依赖项node_modules。

要了解在步骤5中安装的不同模块的更多信息，请参阅我关于Browserify，Babelify和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'])

上面案例代码：

第1-4行。我们需要安装node.js模块并将它们分配给变量。
第6行。我们定义build了可以通过键入运行的gulp任务gulp build。
第7行。我们开始描述我们的build任务将会做什么。我们告诉Gulp使用Browserify app.jsx。另外，我们打开调试模式，这有利于开发。
第8-11行。我们将Babelify变换应用于我们的代码。这允许我们将ECMAScript6中编写的代码转换为ECMAScript5。接下来我们将结果输出到dist/bundle.js文件。
第14-16行。我们定义了名为watch的gulp任务，可以通过输入gulp watch来运行。每当jsx文件发生任何更改时，此任务都将运行构建任务。
第18行。我们定义了可以通过输入gulp来运行的默认gulp任务。此任务只执行监视任务。

你需要做的仅仅是输入gulp终端并按Enter键。它将监视React组件内部的更改并不断重新构建所有内容。

JSX和Babel

您可能已经注意到我们正在使用.jsx扩展而不是.js。JSX是ReactJS团队开发的特殊JavaScript语法扩展。这种格式是为了更方便地开发ReactJS组件而提供的。

以下是有关JSX的更多信息。

另一个有用的东西 - Babelify开箱即用了解JSX语法（更多关于此内容的
博文）。

使用ECMAScript 6编写第一个React组件

是时候使用ES6创建我们的第一个非常简单的组件了。添加名为hello-world.jsx项目根目录的文件：

import React from 'react';

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

export default HelloWorld;

一些解释：

第1行。我们导入React库并将其放入一个名为的变量React。
第3-8行。通过扩展React.Component类使用ES6类创建React组件。我们添加非常简单的render方法，它返回包含参数的<h1>标签。
第9行。我们使用导出刚刚创建的组件到外部世界 export default HelloWorld。

为了更简单的理解，我放置了相同组件的代码，但是在不使用ES6类的情况下编写：

import React from 'react';

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

export default HelloWorld;

总结;

让我们完成我们的简单例子。

创建名为的文件app.jsx：

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

ReactDOM.render(
    <HelloWorld phrase="ES6"/>,
    document.querySelector('.root')
);

这里我们导入HelloWorld在上一步创建的组件并设置phrase该组件的prop。另请注意，我们使用特殊react-dom包来渲染HelloWorld组件。那是因为核心React包从React版本0.14开始与渲染包分离。

接下来，让我们创建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文件）并在浏览器中打开此HTML文件。

你应该看到下面的图像。