React与ES6（一）开篇介绍
React与ES6系列：
- React与ES6（一）开篇介绍
- React和ES6（二）ES6的类和ES7的property initializer
- React与ES6（三）ES6类和方法绑定
- React与ES6（四）ES6如何处理React mixins
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转码。
在根目录添加文件.babelrc，并在提其中添加如下内容：
{
"presets": ["es2015", "react"]
}
接下来配置webpack。在根目录创建文件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节点下添加如下内容：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -d --watch",
"build": "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.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文件。你就会看到运行结果了。
