1.安装-两种方式
(1) create-react-app name
(2) npx create-react-app name
2.安装 react-router-dom
方法：
cnpm install react-router-dom --save
运用：
react-router-dom 文档 （https://www.jianshu.com/p/97e4af32811a）
在项目入口文件（index.js）引入 react-router-dom;
import { BrowserRouter, HashRouter, Link, NavLink, Prompt, MemoryRouter, Redirect, Route, Router, StaticRouter, Switch,} from react-router-dom
<Router>所有 Router 组件的通用低阶接口。通常情况下，应用程序只会使用其中一个高阶 Router：
// 高阶router包括 ******只允许有且只有一个子节点
// 路由入口，组件下只允许存在一个子元素，如存在多个则会报错。
<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>
一个路由项目，常用的
<BrowserRouter>
<Route>
<Link>
<Switch>
3. Link 跳转页面 传值
(1)使用方法：
A.to:string -- 链接到的路径名或位置。
<Link to="/about">关于我们</Link>
B.to:object --要链接的位置。
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
C.repalce:bool
如果为真，单击链接将替换历史堆栈中的当前条目，而不是添加新条目。
(2) Link传值的坑人表现!（https://blog.csdn.net/cen_cs/article/details/78426164）
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
在下一个页面可以这样取到值 (通过props.location.state 取值)
class CompName extends React.Component {
constructor(props) {
super(props);
this.state = {
param:props.location.state,
search:props.location.search,
};
console.log("state-----:",this.props) }
}
*********但是，如果在Link里面加个 target="_blank", 这样的话, state里面的值就是undefined
4.Switch的用法（https://www.jianshu.com/p/ed5e56994f13?from=timeline）
<Switch>是唯一的因为它仅仅只会渲染一个路径。
相比之下（不使用<Switch>包裹的情况下），每一个被location匹配到的<Route>将都会被渲染。
5.<Route>组件有如下属性：
path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；
strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；
eg:
<Route strict path="/peoples/" component={Peoples} /> // 可匹配成功
<Route strict path="/peoples" component={Peoples} /> // 不可匹配成功
6.path的匹配规则
*** -路由匹配路径。（没有path属性的Route 总是会 匹配）；
:paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数
() – 在它内部的内容被认为是可选的
* – 匹配任意字符（非贪婪的）直到命中下一个字符或者整个 URL 的末尾，并创建一个 splat 参数
eg:
<Route path="/hello/:name"> // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)"> // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*"> // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg
匹配规则（案例）：
<Route path='/roster' />
// 当前路径是 '/', 不满足匹配
// 当前路径是 '/roster' 或 '/roster/2', 满足匹配
// 如果只想匹配 '/roster', 需要使用"exact"参数
// 下面的会匹配 '/roster', 但是不会匹配'/roster/2'.
<Route exact path='/roster'/>
// 你可能会发现你会为许多Route添加"exact"参数
// 在未来的版本里(i.e. v5), "exact"参数可能会成为默认值
// 更多信息请看 GitHub issue:
// https://github.com/ReactTraining/react-router/issues/4958
7.区分-有状态组件和无状态组件 （https://segmentfault.com/a/1190000016774551）
有状态组件： 可包含 react的生命周期函数 （https://www.jianshu.com/p/c9bc994933d5）
无状态组件： 主要为了接受父组件的参数，在页面进行渲染，不做其他处理
8.列表遍历渲染数据
使用 map() 方法
9.react事件的注意事项
onClick={this.delete} // 直接获取页面中已经定义额函数
onClick={this.delete()} // 添加 （） 页面加载即调用
onClick={this.delete.bind()} // 添加 （） 可同时为函数添加 bind()方法 阻止直接运行
10.数据的更新
react的数据统一放在 state={} 里面；
数据更新类似微信小程序
更新使用方法： （this.setState）
this.setState({
arr:newArray
})
案例效果：
链接：https://pan.baidu.com/s/1jpCVMVQj1EIlMuFgEN8CLw 提取码：7zz9