React與ES6系列：
- React與ES6（一）開篇介紹
- React和ES6（二）ES6的類和ES7的property initializer
- React與ES6（三）ES6類和方法綁定
- React與ES6（四）ES6如何處理React mixins
ES2015（也就是ES6）帶來了很多新的語言特性。比如：類、箭頭方法秘蛇、rest參數(shù)、promise剧蹂、generator等很多功炮。如果你對ES6還不是很熟悉的話可以看這里。
但是瀏覽器對于ES6的支持還不是很好题造。你可以看看這個ES6兼容表鹦赎。顯而易見的是不同瀏覽器對于ES6的兼容參差不齊谍椅。于是就有人想把ES6的代碼轉(zhuǎn)成ES5的不就可以兼容了嗎。
這其中做的最好的就是Babel, 一個非常棒的工具古话。后面會詳細(xì)的介紹如何使用雏吭。
準(zhǔn)備開發(fā)環(huán)境
為了可以正常開發(fā)，那么就需要用到webpack陪踩。這個工具可以把模塊和相關(guān)的依賴項都打包到一起思恐。之后，只要在瀏覽器中引用打包的腳本膊毁。
- 首先你需要安裝nodejs胀莹。如果你還沒有安裝的話，直接去官網(wǎng)下載最新的安裝包安裝即可婚温。
- 接下來安裝
webpack描焰。npm install webpack --save-dev。 - 安裝
babel-loader栅螟。npm install babel-loader babel-preset-es2015 babel-preset-react --save荆秦。有了babel-loader和對應(yīng)的preset，就可以把ES6的代碼轉(zhuǎn)換為ES5了力图。但是步绸，之前還需要配置babel-loader。 - 安裝react以及相關(guān)包吃媒。
npm install react react-dom --save瓤介。
下面就是babel-loader和webpack的配置吕喘。首先配置babel-loader否則webpack無法使用babel轉(zhuǎn)碼。
在根目錄添加文件.babelrc刑桑，并在提其中添加如下內(nèi)容：
{
"presets": ["es2015", "react"]
}
接下來配置webpack氯质。在根目錄創(chuàng)建文件webpack.config.js, 之后在文件中添加如下代碼：
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節(jié)點下添加如下內(nèi)容：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -d --watch",
"build": "webpack -p"
},
現(xiàn)在可以運行命令npm run dev開始開發(fā)祠斧，這時webpack會監(jiān)視源代碼的改變闻察，任何對源代碼的修改都會觸發(fā)重新打包的動作。
更多關(guān)于webpack和babel-loader的配置方面的內(nèi)容請移步這里琢锋。本文不再多做介紹辕漂。
JSX和Babel
你可能已經(jīng)注意到，我們使用的是.jsx后綴而不是js吴超。JSX是ReactJs團(tuán)隊開發(fā)的一個JavaScript的擴(kuò)展钉嘹。點擊這里查看更多關(guān)于JSX的內(nèi)容。
使用ES6寫第一個React組件
是不是已經(jīng)等不及了烛芬。
先來看看項目結(jié)構(gòu)：
project
|--src
|--client
|--app
|--public
|--index.html
|--.babelrc
|--package.json
|--webpack.config.js
在app目錄下創(chuàng)建一個文件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宏蛉。注意：在類的前面還有關(guān)鍵字export default遣臼，在別的模塊中import并使用HelloWorld組件。 - 覆蓋React組件的
render方法拾并。 -
render方法返回JSX定義的html元素揍堰，這個元素內(nèi)部顯示的文本通過解析this.props.phrase獲得般贼。
組合到一起
在之前已經(jīng)創(chuàng)建好的index.js文件內(nèi)添加如下內(nèi)容：
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文件单鹿，如果你還沒有創(chuàng)建這個文件的話孽水，那么創(chuàng)建一個焕数。目錄位置參考前面的項目目錄一節(jié)甘改。在index.html文件中添加如下內(nèi)容：
<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>
所需要的全部材料都有了√沟叮現(xiàn)在就可以用webpack打包了失晴。運行命令npm run dev恨樟，稍后js代碼就會轉(zhuǎn)碼褪那，打包到bundle.js文件中了幽纷。
