react项目中遇到的BUG

前情提要：最近在学习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文件：

app.js、main.js、center.js、toutiao.js、quanzi.js、shipin.js、dinggou.js文件如下：

//app.js文件
import React from 'react';
import { Link } from 'react-router';
import Jquery from "./jquery.js";
import styles from "./style.css";

class App extends React.Component {
constructor(props) {
super(props);
}

render() {
return (

  
 欢迎访问主界面 

{
this.props.children
}

   

用户中心 
  
 圈子 
 视频 
 头条 
 订购 

); } } //代替A标签 不需要使用hash值   // this.props.children 指代是每一个 route 嵌套结构下的子组件  export default  App

//main.js文件
import React, { Component, PropTypes } from 'react';
import ReactDOM,{render} from 'react-dom';
import { Router,Route,hashHistory,Link,browserHistory,IndexRoute,IndexRedirect,Redirect } from 'react-router';
import App from './app.js';
import Center from './center.js';
import Toutiao from './toutiao.js';
import Quanzi from './quanzi.js';
import Dinggou from './dinggou.js';
import Shipin from './shipin.js';
import styles from "./style.css" 


//1.主视图
var doc = document.getElementById("box");
render((
        
            
                 //设置默认路由
                
                
                
                
                 
            
        
    ),doc)

//center.js文件  其他类似
import React from 'react';

class Center extends React.Component {
constructor(props) {
super(props);
}

render() {
return (

  个人中心

);
}
}
export default  Center

webpack.config.js文件

var webpack = require("webpack");

var path = 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" //webpack  2.0 写法  1.0 不写-loader
},
{
test:/\.css$/,
loader:"style-loader!css-loader" //webpack  2.0 写法  1.0 不写-loader
},
{
test:/\.(jpg|png)$/,
loader:"url-loader?limit=8192" //webpack  2.0 写法  1.0 不写-loader 当 图片大小低于8192 会自动转换 base64格式的图片
}
]
},
plugins:[
new webpack.HotModuleReplacementPlugin(), //热替换 热更行 热加载
new webpack.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",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"json-loader": "^0.5.4",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^2.8.1",
"resolve-url-loader": "^2.0.2",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
}
}

安装的插件

cnpm i -S webpack react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react react-router@2 css-loader style-loader file-loader

遇到的bug