React與ES6（一）開篇介紹

時間 2019-11-25

標籤 react es6 開篇介紹欄目 React 简体版

原文原文鏈接

React與ES6系列：javascript

ES2015（也就是ES6）帶來了不少新的語言特性。好比：類、箭頭方法、rest參數、promise、generator等不少。若是你對ES6還不是很熟悉的話能夠看這裏。html

可是瀏覽器對於ES6的支持還不是很好。你能夠看看這個ES6兼容表。顯而易見的是不一樣瀏覽器對於ES6的兼容良莠不齊。因而就有人想把ES6的代碼轉成ES5的不就能夠兼容了嗎。java

這其中作的最好的就是Babel, 一個很是棒的工具。後面會詳細的介紹如何使用。node

準備開發環境

爲了能夠正常開發，那麼就須要用到webpack。這個工具能夠把模塊和相關的依賴項都打包到一塊兒。以後，只要在瀏覽器中引用打包的腳本。react

首先你須要安裝nodejs。若是你尚未安裝的話，直接去官網下載最新的安裝包安裝便可。
接下來安裝webpack。npm install webpack --save-dev。
安裝babel-loader。npm install babel-loader babel-preset-es2015 babel-preset-react --save。有了babel-loader和對應的preset，就能夠把ES6的代碼轉換爲ES5了。可是，以前還須要配置babel-loader。
安裝react以及相關包。npm install react react-dom --save。

下面就是babel-loader和webpack的配置。首先配置babel-loader不然webpack沒法使用babel轉碼。webpack

在根目錄添加文件.babelrc，並在提其中添加以下內容：git

{
    "presets": ["es2015", "react"]
}

接下來配置webpack。在根目錄建立文件webpack.config.js, 以後在文件中添加以下代碼：es6

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
      path: BUILD_DIR,
      filename: 'bundle.js'
  },
  module: {
      loaders: [
          {
              test: /\.jsx?/,
              include: APP_DIR,
              loader: 'babel'
          }
      ]
  }
};

module.exports = config;

最後，在package.json文件中的scripts節點下添加以下內容：github

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack -d --watch",
    "build": "webpack -p"
},

如今能夠運行命令npm run dev開始開發，這時webpack會監視源代碼的改變，任何對源代碼的修改都會觸發從新打包的動做。web

更多關於webpack和babel-loader的配置方面的內容請移步這裏。本文再也不多作介紹。

JSX和Babel

你可能已經注意到，咱們使用的是.jsx後綴而不是js。JSX是ReactJs團隊開發的一個JavaScript的擴展。點擊這裏查看更多關於JSX的內容。

使用ES6寫第一個React組件

是否是已經等不及了。

先來看看項目結構：

project
|--src
      |--client
           |--app
           |--public
           |--index.html
|--.babelrc
|--package.json
|--webpack.config.js

在app目錄下建立一個文件index.jsx做爲React項目的入口文件。以後添加hello-world.jsx文件。在其中添加以下代碼：

import React from 'react'; // 1

// 2
export default class HelloWorld extends React.Component {
    // 3
    render() {
        // 4
        return <h1>Hello from {this.props.phrase}</h1>
    }
}

解釋一下上面的代碼：

把React庫import引入到React變量中。
定義了一個咱們本身的組件HelloWorld，這個組件繼承（extends）自React.Component。注意：在類的前面還有關鍵字export default，在別的模塊中import並使用HelloWorld組件。
覆蓋React組件的render方法。
render方法返回JSX定義的html元素，這個元素內部顯示的文本經過解析this.props.phrase得到。

組合到一塊兒

在以前已經建立好的index.js文件內添加以下內容：

import React from 'react';
import {render} from 'react-dom';

import HelloWorld from './hello-world';

class App extends React.Component {
    render() {
        return (<div>
            <HelloWorld phrase="ES2015" />
        </div>);
    }
}

render(<App />, document.getElementById('app'));

打開index.html文件，若是你尚未建立這個文件的話，那麼建立一個。目錄位置參考前面的項目目錄一節。在index.html文件中添加以下內容：

<html>
  <head>
    <meta charset="utf-8">
    <title>React & ES6</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

所須要的所有材料都有了。如今就能夠用webpack打包了。運行命令npm run dev，稍後js代碼就會轉碼，打包到bundle.js文件中了。

在瀏覽器中打開這個html文件。你就會看到運行結果了。