我将前段时间练手的demo用es6重写,路由使用React Router,使用webpack打包,构成了一个简单的单页面应用。
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>
);
}
具体过程:
weibo-form