React版本踩坑🦌

记在前面：为了使用ES6语法，React在新版本中更新了很多API，很多旧的语法已经被遗弃，但是网络中很多教程又依赖于旧版本，导致很多bug问题。也怪自己眼笨😞 看到老版本的教程。

react最新文档：http://www.css88.com/react/
react-router最新文档：http://reacttraining.cn/web/guides/quick-start
redux文档：https://github.com/camsong/redux-in-chinese
react社区🏠：http://react-china.org/

1. componet封装
2. 使用PropTypes检查prop类型
3. react-router版本问题

1. componet封装后，一般不使用createClass

参考：React.createClass 对决 extends React.Component

2. 使用PropTypes检查prop类型

ClickCounter.propTypes = {
    label: React.PropTypes.string.isRequired,
    initialValue: React.PropTypes.number
}

报错如下：

image.png
原因：在之前的版本之中，我们可以通过React.PropTypes这个API访问React内置的一些类型来检查props，在15.5.0版本中，这一API被独立成了一个新的包 prop-types
解决：

import PropTypes from 'prop-types'
...
ClickCounter.propTypes = {
    label: PropTypes.string.isRequired,
    initialValue: PropTypes.number
}

3. react-router版本问题

使用react-router如下:

import { Router, Route } from 'react-router'
...
<Router>
    <div>
        <Route path='/login' component={ Login }></Route>
        <Route path='/regist' component={ Regist }></Route>
    </div>
</Router>

image.png

原因：react-router 4.0版本语法更新，React Router被拆分成三个包：react-router,react-router-dom和react-router-native，目前网站搭建只需要引入react-router-dom即可
解决：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

4. 组件引入错误

image.png

import ListView from './../../../components/ListView'

改成

import { ListView } from './../../../components/ListView'

持续踩坑中😊 ，敬请期待...