【小作品】react构建简单SPA（react+webpack+router+es6）

我将前段时间练手的demo用es6重写，路由使用React Router，使用webpack打包，构成了一个简单的单页面应用。

github代码       页面示例

url-loader来打包图片，file-loader来打包MP3文件

package.json

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "just for webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack && webpack-dev-server --hot --inline"
  },
  "author": "heyue",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.2.2",
    "css-loader": "^0.27.3",
    "less": "^2.7.2",
    "less-loader": "^4.0.2",
    "file-loader": "^0.11.1",
    "url-loader": "^0.5.8",
    "svg-url-loader": "^2.0.2",
    "style-loader": "^0.14.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "babel-preset-react": "^6.23.0",
    "babelify": "^7.3.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.0"
  }
}

url-loader来打包图片，file-loader来打包MP3文件

在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。它的 URL规则中需要带上 #。Web 服务并不会解析 hash，也就是说 # 后的内容 Web 服务都会自动忽略，但是JavaScript 是可以通过 window.location.hash 读取到的，读取到路径加以解析之后就可以响应不同路径的逻辑处理。

react-router的实现逻辑：跳转=》path=》component=》静态资源（js，css，html）=》show（页面展示）

ReactDOM.render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
        	<IndexRoute component={Home} />
        	<Route path="/weiboform" component={WeiboForm} />
       		<Route path="/todolist" component={TodoList} />
       		<Route path="/music" component={Music} />
       	</Route>
    </Router>
), document.getElementById('app')

关于将react中的es5转为es6，我建议看这篇文章 http://www.mrfront.com/2016/06/30/react-es5-to-es6/

其中一个很大的坑在于：在ES5下，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但官方现在逐步认为这反而是不标准、不易理解的在ES6下，你需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）来调用。我使用箭头函数会报错，到现在也没想明白，所以用的bind(this)方式。例如

 render(){
         return(
            <div className="container">
                <div className='box1'>
                    <h2 className="top">react-todolist</h2>
                    <TypeNew add={this.handleAdd.bind(this)} todo={this.state.todolist} />
                    <ListTodo todo={this.state.todolist} del={this.handleAdd.bind(this)} />
                </div>
            </div>
        );
    }

具体过程：

todolist

weibo-form

music-player