React+webpack+es6的环境配置及demo改写

写于 2016.05.14

前言

项目地址：jrainlau/react-es6

git clone https://github.com/jrainlau/react-learning
cd react-learning && npm install
npm run dev

而后浏览器打开localhost:8080便可
复制代码

最近在家闲得无聊，因此打算折腾一下react。在此以前，我是一个vue的重度使用用户，可是看到react确实很是火爆，因此也就趁此机会去了解一下react，增加一下见识。

学习react的参考资料，很大一部分来自 @阮一峰 的React入门实例教程。可是阮大神是用传统的script标签以及es5的写法，因此我针对教程，经过配置webpack，最终使用es6的写法来改写教程的demo，结合组件化的思想，完成最终的demo的改写。

环境配置

环境配置参照了@minooo 的文章：webpack-es6-react （为系统学习React布一个良好的开局）。这里引用一些关键包的说明：

package.json 中的 包/库 部分说明

• babel-core babel6 的基础模块
• babel-eslint ESLint 是前端JS代码检测利器。而 babel-eslint 则容许你检测全部的 Babel 代码。
• babel-loader 这个包容许你使用 Babel 和 webpack 转译（Transpiling） JavaScript 文件。
• babel-plugin-react-transform 这个插件经过任意转换的方式去封装 React 组件。换句话说，你能够为所欲为的摆弄你的组件了。
• babel-plugin-transform-runtime 在 Babel 转换过程当中，详细的展现引用的相关辅助工具和内置命令，并自动的聚合填充你的代码而不会污染全局。
• babel-preset-es2015 此预设包含了全部的 es2015 插件。
• babel-preset-react 此预设包含了全部的 React 插件。
• babel-preset-stage-0 此预设包含了 stage 0 中的全部插件。
• eslint JavaScript 语法检测利器：分析出你代码潜在的错误和非标准用法。
• eslint-plugin-react ESLint 中关于 React 语法检测的插件。
• react-transform-hmr 一个 React 转换装置，该装置经过引用 Hot Module Replacement API 使热重载 React 的类成为可能。
• react-transform-catch-errors 呈现你 React 组件的错误信息。
• webpack-dev-server 为 wepack app 提供一个服务器，若是你的代码有任何变化，浏览器将自动刷新显示，极大的方便前期开发。
• babel-runtime Babel 自带的运行环境。

另外，我增长了style-loader，css-loader，less，less-loader这四个包用于加载.less文件模块。（注意，less-loader与less必须同时存在才能正常工做。）

根目录下文件部分说明

• .babelrc : 什么是 .babelrc 文件呢？熟悉 linux 的同窗必定知道，rc 结尾的文件一般表明运行时自动加载的文件，配置等。一样在这里也是有一样做用的。里面的 env 字段，能够对 BABEL_ENV 或 NODE_ENV 指定不一样的环境变量，进行不一样编译。
• eslintignore 通知 eslint 忽略那些不该该被检测的文件。
• eslintrc eslint 配置文件，使 JavaScript 代码规范化，标准化书写。

使用es6改写demo

首先能够参考这篇文章React on ES6+，里面说起了关于如何使用es6进行react开发的方法。

使用React.Component代替React.createClass

// The ES5 way
var Photo = React.createClass({
  handleDoubleTap: function(e) { … },
  render: function() { … },
});

// The ES6+ way
class Photo extends React.Component {
  handleDoubleTap(e) { … }
  render() { … }
}
复制代码

使用static关键字完成属性初始化工做（这是es7的内容，注意state能够直接经过state = { key: value }来定义）

// The ES5 way
var Video = React.createClass({
  getDefaultProps: function() {
    return {
      autoPlay: false,
      maxLoops: 10,
    };
  },
  getInitialState: function() {
    return {
      loopsRemaining: this.props.maxLoops,
    };
  },
  propTypes: {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  },
});

// The ES6+ way
class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}
复制代码

在constractor中定义state

// The ES5 way
var Video = React.createClass({
  getInitialState: function() {
    return {
      loopsRemaining: ...
    };
  }
});

//The ES6 way
class Video extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loopsRemaining: ...
        }
    }
}
复制代码

组件化思路

经过es6的模块功能，能够很方便地利用webpack实现页面组件化。

咱们总共有7个小的demo，我把它们做为不一样的组件，最终加载到根组件中：

// app.js

import React, { Component } from 'react'
import Component1 from './demo1.js'
import Component2 from './demo2.js'
import Component3 from './demo3.js'
import Component4 from './demo4.js'
import Component5 from './demo5.js'
import Component6 from './demo6.js'
import Component7 from './demo7.js'

export default class Demo extends Component {
  render() {
    return (
      <div>
        <Component1></Component1>
        <Component2></Component2>
        <Component3 title='Props example'></Component3>
        <Component4>
            <span>Hello</span>
            <span>React</span>
        </Component4>
        <Component5 content='This is the content'></Component5>
        <Component6></Component6>
        <Component7></Component7>
      </div>
    )
  }
}
复制代码

具体请进入个人项目查看代码。

能够看到，经过es6的改写，在react中实现组件化是很是清晰简单的，只须要把须要的组件import进来便可。

另外，因为我很是讨厌行内样式，而且是不写less会死星人，因此并无按照官方推荐的样子去定义一个style object，而是经过less-loader在须要定义样式的地方直接把样式require进来，像这样：

// demo7.js

render() {
    let word = this.state.words
    require('../less/test.less')
    return (
        <div>
            <h3 className='test-h1'>DEMO 7, state</h3>
            <p>{ word }</p>
            <input type="text" onChange={ this.stateFn }/>
            <hr/>
        </div>
    )
}
复制代码

结语

这个demo仅仅做为入门学习使用，react更多深层次的内容可能会在后续慢慢更新，好比加上react-router，redux什么的……若是这篇文章可以对你有所启发是最好不过，若是有任何错漏也欢迎拍砖指出，谢谢你们~