前情提要：最近在学习react，然后就将项目中遇到的bug总结下来，作为借鉴！
项目结构：
demo
|app
|app.js
|main.js
|center.js
|toutiao.js
|quanzi.js
|shipin.js
|dinggou.js
|style.css
|build
|index.html
|.babelrc
|package.json
|node_modules
|webpack.config.js
html文件：
<!DOCTYPEhtml> <htmllang="en"> <head> <Metacharset="UTF-8"> <Metaname="viewport"content="width=device-width,initial-scale=1.0"> <Metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> </head> <body> <divid="Box"> </div> <scriptsrc="http://localhost:8080/webpack-dev-server.js"></script> <scriptsrc="app.js"></script> <scriptsrc="main.js"></script> </body> </html>
app.js、main.js、center.js、toutiao.js、quanzi.js、shipin.js、dinggou.js文件如下：
//app.js文件 importReactfrom'react'; import{Link}from'react-router'; importJqueryfrom"./jquery.js"; importstylesfrom"./style.css"; classAppextendsReact.Component{ constructor(props){ super(props); } render(){ return( <div> <h1>欢迎访问主界面</h1> <divclassName="showBox"> { this.props.children } </div> <ul> <li><Linkto="/center"activeStyle={{background:"blue"}}>用户中心</Link></li> <li><Linkto="/quanzi"className="danger">圈子</Link></li> <li><Linkto="/shipin"activeStyle={{background:"blue"}}>视频</Link></li> <li><Linkto="/toutiao"activeStyle={{background:"blue"}}>头条</Link></li> <li><Linkto="/dinggou"activeStyle={{background:"blue"}}>订购</Link></li> </ul> </div> ); } } //代替A标签不需要使用hash值 //this.props.children指代是每一个route嵌套结构下的子组件 exportdefaultApp
//main.js文件 importReact,{Component,PropTypes}from'react'; importReactDOM,{render}from'react-dom'; import{Router,Route,hashHistory,Link,browserHistory,IndexRoute,IndexRedirect,Redirect}from'react-router'; importAppfrom'./app.js'; importCenterfrom'./center.js'; importToutiaofrom'./toutiao.js'; importQuanzifrom'./quanzi.js'; importDinggoufrom'./dinggou.js'; importShipinfrom'./shipin.js'; importstylesfrom"./style.css" //1.主视图 vardoc=document.getElementById("Box"); render(( <Routerhistory={browserHistory}> <Routepath="/"component={App}> <IndexRoutepath="/center"component={Center}/>//设置默认路由 <Routepath="/toutiao"component={Toutiao}/> <Routepath="/quanzi"component={Quanzi}/> <Routepath="/shipin"component={Shipin}/> <Routepath="/dinggou"component={Dinggou}/> <IndexRedirectto="/toutiao"></IndexRedirect> </Route> </Router> ),doc)
//center.js文件其他类似 importReactfrom'react'; classCenterextendsReact.Component{ constructor(props){ super(props); } render(){ return( <div> 个人中心 </div> ); } } exportdefaultCenter
varwebpack=require("webpack");
varpath=require("path")
module.exports={
devtool:"eval-source-map",entry:{
main:["webpack/hot/dev-server",__dirname+"/app/main.js"],app:["webpack/hot/dev-server",__dirname+"/app/app.js"]
},output:{
path:__dirname+"/build",filename:"[name].js"//变量name固定的API
},module:{
loaders:[
{
test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"//webpack2.0写法1.0不写-loader
},{
test:/\.css$/,loader:"style-loader!css-loader"//webpack2.0写法1.0不写-loader
},{
test:/\.(jpg|png)$/,loader:"url-loader?limit=8192"//webpack2.0写法1.0不写-loader当图片大小低于8192会自动转换base64格式的图片
}
]
},plugins:[
newwebpack.HotModuleReplacementPlugin(),//热替换热更行热加载
newwebpack.optimize.UglifyJsPlugin(),//压缩JS代码
]
}
.babelrc文件：
{
"presets":["es2015","react"]
}
package.json文件：
{
"name":"react","version":"1.0.0","description":"","main":"index.js","scripts":{
"build":"webpack","start":"webpack-dev-server--progress--colors--content-base./build--history-api-fallback"
},"author":"","license":"ISC","devDependencies":{
"babel-core":"^6.24.1","babel-loader":"^6.4.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","css-loader":"^0.28.0","json-loader":"^0.5.4","react":"^15.5.3","react-dom":"^15.5.3","react-router":"^2.8.1","style-loader":"^0.16.1","webpack":"^2.3.3","webpack-dev-server":"^2.4.2"
},"dependencies":{
"babel-core":"^6.24.1","file-loader":"^0.11.1","react":"^15.5.4","react-dom":"^15.5.4","resolve-url-loader":"^2.0.2","url-loader":"^0.5.8","webpack-dev-server":"^2.4.2"
}
}
安装的插件
cnpmi-Swebpackreactreact-dombabel-corebabel-loaderbabel-preset-es2015babel-preset-reactreact-router@2css-loaderstyle-loaderfile-loader
遇到的bug
