React与ES6（一）开篇介绍

React与ES6系列：

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文件。你就会看到运行结果了。