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

pingink 發布于2019-08-20 17:59 / 539人閱讀

摘要：下一步我們將結果輸出到文件。這是我們用編寫的第一個非常簡單的組建。使用將創建的組建導出以便在其它地方能夠正常導入使用。

這是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入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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