# react-demo

**Repository Path**: y1378056783/react-demo

## Basic Information

- **Project Name**: react-demo
- **Description**: 用creat-react-app创建react演示程序
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于react的单页应用演示程序
---
## 要点
1. react路由需要使用hashRouter,不然打包后会无法正确渲染
2. ref获取原生dom节点`this.refs.demo <p ref='demo'></p>`
3. 通过map遍历必须在最外层设置key属性`data.map((item,idx)=>{ return <p key={idx}>{item}</p>})`
4. dangerouslySetInnerHTML方法渲染dom`<div dangerouslySetInnerHTML={{__html: '<h3>hahhah</h3>'}}></div>`
5. 通过props在组件中传数据`<Components data={this.state.data}/>`
6. Object.keys遍历对象`obj={name:'jack'} Object.keys(obj).map((item,idx)=>{ return <p key={idx}>{item}</p>})`
7. 行内样式需要{{}}`style={{background:red,color:blue}}`
8. Route第一个必须设置exact属性`<Route exact path={} component={}></Route>`
9. 事件绑定时必须显示绑定this,如`onClick={this.SomeThing().bind(this)}`,或者使用箭头语法，如`onClick=()=>{this.SomeThing()}`
10. 事件传值需要注意参数位置,很关键`SomeThing(idx,e){e.target} onClick={this.SomeThing().bind(this,idx)}`
### 文件目录结构
---
* 说明
* index.html---主入口
* components---组件
* page---页面，（temp是包含头尾的公共文件，其它是普通页面）
* App.js---页面主路由映射
* index.js---全局入口
* base.js---基础方法
* store---状态管理
```
my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    components/
      Footer/
        index.js
    page/
      temp.js
	store/
	  user.js
	  index.js
	  map.js
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
```
---
### 程序运行
`npm start npm run build`