# embraceReact

**Repository Path**: LHShameGod/embrace-react

## Basic Information

- **Project Name**: embraceReact
- **Description**: react基础学习。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-16
- **Last Updated**: 2023-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## jsx语法规则
1. 定义虚拟DOM时，不要写引号
2. 标签中混入js表达式*时，使用 {}
3. 样式的类名指定要用className，而不是class
4. 内联样式，要用 style={{key:value}} 的形式去写
5. 只有一个根标签
6. 标签要闭合
7. 标签首字母如果是小写，babel会去匹配html里的标签；如果标签首字母是大写，react会去渲染对应的组件。

js表达式：一个表达式可以产生一个值，可以放到任何一个需要值的地方。

js语句：例如for循环，if循环等。所以jsx中的 {} 不可以放js语句

## 函数式组件和类式组件
老项目会使用类式组件，后面基本都是函数式组件

## 三大属性
react三大属性：state、props、ref

## git commit 的格式
```
'feat',//新特性、新功能
'fix',//修改bug
'docs',//文档修改
'style',//代码格式修改, 注意不是 css 修改
'refactor',//代码重构
'perf',//优化相关，比如提升性能、体验
'test',//测试用例修改
'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
'revert',//回滚到上一个版本
'build',//编译相关的修改，例如发布版本、对项目构建或者依赖的改动
```

## 引入react-router-dom版本5
```npm i react-router-dom@5```

1. 明确好界面中的导航区、展示区
2. 导航区的a标签改为Link标签
```<Link to="/xxxxx">Demo</Link>```
3. 展示区写Route标签进行路径的匹配
```<Route path='/xxxx' component={Demo}/>```
4. ```<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>```

注意to和path里面不要使用大写！

如果使用HashRouter，路径会出现#，这个#后面的数据默认是前台资源，不会写带给服务器。

## redux
npm i redux