react项目结构初探(第一天)

react项目结构与vue结构基本一致，附上图示便于理解。

1. dist文件夹 -- 打包之后的文件夹

2.node_modules文件夹 -- 依赖包所在文件

3.public文件夹 -- 存放静态资源

4.src文件夹 -- 代码编写的主要文件

1. api文件 -- 接口文件
2. assets文件 -- 存放一些公共的css文件 以及项目图片
3. config文件 -- 里面存放router路由文件 以及一些工具函数
4. pages文件 -- 编写的页面都放在这里面
5. store文件 -- 相当于vuex 状态管理工具
6. utils文件 -- 配置文件 比如axios二次封装之类的文件
7. Ap.jsx文件 -- 处理路由
8. index.js文件 -- 项目的入口文件

5.webpack文件 webpack的一些配置

插件 react-redux的使用

redux是一个专门用于做状态管理的JS库(不是react插件库)，类似Vue的Vuex

作用: 集中式管理react应用中多个组件共享的状态

某个组件的状态，需要让其他组件可以随时拿到（共享）。

一个组件需要改变另一个组件的状态（通信）。

总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

npm下载之后 在入口文件中导入

import { Provider } from react-redux
//引入store
import store from ./store/store

在ReactDOM中配置

路由插件react-router-dom主要api的使用

1.<BrowserRouter>//history

2.<HashRouter> //hash

3.<Route> //路由组件

    展示区写Route标签进行路径的匹配
   <Route path=/xxxx component={Demo}/>
   
4.<Redirect>  //设置默认路径
<Redirect to="/xxx">  xxx为设置的默认显示路径

5.<Link>  //路由跳转 类似于JS中<a></a>标签

    导航区的a标签改为Link标签
	<Link to="/xxxxx">Demo</Link>
	
6.<NavLink>  //实现路由链接的高亮，通过activeClassName指定样式名 下方有详细说明NavLink

7.<Switch>  //提高路由匹配效率(单一匹配)  下方有详细说明Switch