# ReactDemo

**Repository Path**: haitaoss/react

## Basic Information

- **Project Name**: ReactDemo
- **Description**: React学习demo，学习视频：https://www.atguigu.com
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## react_blank: 使用脚手架创建的空项目
## react_test: react语法测试项目
## react_demo: react使用demo项目
## react_router: react路由使用demo项目
## react_ui: react UI库antd-mobile使用测试项目


# 知识点

cnpm install prop-types --save
cnpm install axios --save 
npm install pubsub-js --save
cnpm install react-router-dom@4 --save

public 就是项目的根路径，使用静态资源的时候就以public为根目录

单页应用的连接叫做路由连接

路由（route）：映射关系（key:path,value:callbackFunction/component）

路由组件(views) 非路由组件(component)

## 如何编写路由效果
1. 编写路由组件
2. 再父路由组件中指定
    路由连接：<NavLink> <Link>
    路由：<Route>
    
问题；如何给路由组件传递数据? 解决；路由连接:xx    
```html
<div>
    <ul>
        {this.state.messages.map((value, index) => (
            <li key={index}>
                <a href={`/home/message/messagedetail/${value.id}`}>{value.title}</a>
            </li>
        ))}
    </ul>
    {/* :id 既是占位符也是标示名称 */}
    <Route path='/home/message/messagedetail/:id' component={MessageDetail}></Route>
</div>
```

什么是路由连接?
    点击路由连接是不会发请求的，查看network也看不到包
    非路由连接是会发请求的比如：点击a标签
    
    
不理解replace 和 back的区别？


使用到的标签
```html
<BroswerRouter></BroswerRouter>
<HashRouter></HashRouter>

<Route></Route> 路由规则
<Switch></Switch> 里面可以包裹多个路由规则

<Link></Link> 点了以后不增加class
<NavLink></NavLink> 点了以后会增加class
<Redirect></Redirect> 重定向  
```

# ant mobile design
cnpm install antd-mobile --save

# 实现按需打包(组件js/css)
参考连接：https://mobile.ant.design/docs/react/use-with-create-react-app-cn
cnpm install react-app-rewired babel-plugin-import customize-cra --save-dev


# 主要是有流程感，有了流程感做任何事都差不多。


# redux
cnpm install redux --save
cnpm install react-redux --save // 这个是简化在react中使用redux的插件
cnpm install redux-thunk --save
cnpm install redux-devtools-extension --save-dev // 配合浏览器查看使用

# ui组件与容器组件
ui组件就是纯react的代码（jsx）
容器组件就是用到了redux的代码，一般是app.jsx