ES2015（也就是ES6）带来了很多新的语言特性。比如：类、箭头方法、rest参数、promise、generator等很多。如果你对ES6还不是很熟悉的话可以看这里。
但是浏览器对于ES6的支持还不是很好。你可以看看这个ES6兼容表。显而易见的是不同浏览器对于ES6的兼容参差不齐。于是就有人想把ES6的代码转成ES5的不就可以兼容了吗。
这其中做的最好的就是Babel,一个非常棒的工具。后面会详细的介绍如何使用。
准备开发环境
为了可以正常开发，那么就需要用到webpack。这个工具可以把模块和相关的依赖项都打包到一起。之后，只要在浏览器中引用打包的脚本。
- 首先你需要安装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转码。
{
@H_502_52@"presets": [@H_502_52@"es2015",@H_502_52@"react"]
}
接下来配置webpack。在根目录创建文件webpack.config.js,之后在文件中添加如下代码：
var webpack = require(@H_502_52@'webpack');
var path = require(@H_502_52@'path');
var BUILD_DIR = path.resolve(__dirname,@H_502_52@'src/client/public');
var APP_DIR = path.resolve(__dirname,@H_502_52@'src/client/app');
var config = {
entry: APP_DIR + @H_502_52@'/index.jsx',output: {
path: BUILD_DIR,filename: @H_502_52@'bundle.js'
},module: {
loaders: [
{
test: /\.jsx?/,include: APP_DIR,loader: @H_502_52@'babel'
}
]
}
};
module.exports = config;
最后，在package.json文件中的scripts节点下添加如下内容：
@H_502_52@"scripts": { @H_502_52@"test": @H_502_52@"echo \"Error: no test specified\" && exit 1",@H_502_52@"dev": @H_502_52@"webpack -d --watch",@H_502_52@"build": @H_502_52@"webpack -p" },
现在可以运行命令npm run dev开始开发，这时webpack会监视源代码的改变，任何对源代码的修改都会触发重新打包的动作。
更多关于webpack和babel-loader的配置方面的内容请移步这里。本文不再多做介绍。
JSX和Babel
你可能已经注意到，我们使用的是.jsx后缀而不是js。JSX是ReactJs团队开发的一个JavaScript的扩展。点击这里查看更多关于JSX的内容。
使用ES6写第一个React组件
是不是已经等不及了。
先来看看项目结构：
project
|--src
|--client
|--app
|--public
|--index@H_502_52@.html
|--@H_502_52@.babelrc
|--package@H_502_52@.json
|--webpack@H_502_52@.config@H_502_52@.js
在app目录下创建一个文件index.jsx作为React项目的入口文件。之后添加hello-world.jsx文件。在其中添加如下代码：
import React from @H_502_52@'react'; // 1
// 2
export default class HelloWorld extends React.Component {
// 3
render() {
// 4
return <h1>Hello from {this.props.phrase}</h1> } }
解释一下上面的代码：
1. 把React库import引入到React变量中。
2. 定义了一个我们自己的组件HelloWorld，这个组件继承（extends）自React.Component。注意：在类的前面还有关键字export default，在别的模块中import并使用HelloWorld组件。
3. 覆盖React组件的render方法。
4. render方法返回JSX定义的html元素，这个元素内部显示的文本通过解析this.props.phrase获得。
组合到一起
import React from @H_502_52@'react';
import {render} from @H_502_52@'react-dom';
import HelloWorld from @H_502_52@'./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文件。你就会看到运行结果了。
