正文

react项目初始化配置

IP云
IP云V管理员/2 阅读
09/06
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

## [初始化项目](https://facebook.github.io/create-react-app/))
+ 安装
```
npx create-react-app myreact
```
+ 结构
- package.json：包管理文件
- node_modules：局部安装的第三方模块
- .gitignore：被git忽略的目录或者文件
- src：开发目录
- index.js：整个项目的入口文件
- app.js：根组件
- public：存放项目模板文件，以及通过href或者src引入的外部文件
- readme.md：说明文档
+ vscode插件：ES7 React/Redux
+ react-devtools

## [配置](https://www.npmjs.com/package/react-app-rewired)
+ 安装
- 修改默认配置
```
npm install react-app-rewired customize-cra --save-dev
```
- 使用路由
```
npm install react-router-dom --save
```
- 使用sass
```
npm install node-sass --save-dev
```
- 使用多个类名
```
npm install classnames --save
```
+ 新建
- 在项目根目录下新建一个config-overrides.js
```
const {override,addWebpackAlias,useEslintRc} = require('customize-cra')
const path = require('path')

module.exports = override(
addWebpackAlias({
'@': path.resolve(__dirname, 'src/'),
}),
useEslintRc()
)
```
- 在项目根目录下新建一个.eslintrc
```
{
"extends": "react-app",
"rules": {
"no-undef": "off",
"no-restricted-globals": "off",
"no-unused-vars": "off",
"eqeqeq": "off"
}
}
```
+ 使用
- 修改项目根目录下的package.json中的scripts
```
"scripts": {
"dev": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
```
- 启动项目
```
npm run dev
```
- 将css文件全部改成scss

## [路由](https://reacttraining.com/react-router/web/guides/quick-start)
+ index.js
- 引入
```
import {HashRouter} from 'react-router-dom'
```
- 使用
```
<HashRouter><App /></HashRouter>
```
+ App.js
- 引入
```
import {Route,Switch,Link,NavLink} from 'react-router-dom'
import routes from './routes.js'
```
- 使用
```
<Switch>
{
routes.map(e => <Route {...e} />)
}
</Switch>
```
+ routes.js
- 从vies目录引入路由组件
- 在routes中添加这个路由的path、key和component
- 添加exact为true，表示严格匹配

## [组件](https://react.docschina.org/)
- 类型
- 按定义方式
- 函数：一个函数就相当于一个组件
- 无状态：只能接收props，没有state、ref和生命周期
- 受控：当props改变，组件的内容才会更新
- 展示：充当UI组件
- 类：使用es6的class定义一个组件
- 有状态：既能接收props，又能定义state，还有ref和生命周期
- 非受控：除了props，改变state，视图也会变
- 处理逻辑：调用函数，改变状态，渲染视图
- 按功能划分
- 路由：在views目录下
- 复用：在components目录下
- 创建
- 引入
- 类库
```
import React, {Component} from 'react'
import classnames from 'classnames'
```
- 样式
- 全局样式
```
import './index.scss'
```
- 模块化样式
```
import styles from './index.module.scss'
```
- 生成
- 使用jsx语法生成一个react元素，它是html与js的结合体
- 函数
- 类
- ES6的class
- 继承
- 标签
- 可以在多个标签的外层添加一对小括号
- 有且仅有一个顶层标签
- 样式
- 类名不是class，而是className
- 动态
- 内联：style等于花括号，再接一个json对象
- 类名：使用classnames，当成函数来调用
- 事件
- 属性名是小驼峰，属性值是花括号，再接一个函数
- 事件监听函数中没有this，需要设置this，方法有3种
- 1.在花括号中，对函数使用bind
- 2.在contructor中，对函数使用bind
- 3.使用箭头函数
- 参数
- 默认参数是事件对象
- 可以从外部传入参数，方法有两种
- 对函数使用bind方法，第一个参数是this，后面就是传入的参数
- 在回调函数的外层套上一个函数，父函数的默认参数是事件对象，子函数接收所有参数
- 列表
- 使用map方法生成react元素
- 每个元素必须有key，并且不同出现重复
- 导出
```
export default 组件名
```

## 组件
+ 条件渲染
- 不能在花括号里写if条件语句
- 可以在花括号里写逻辑运算符
- &&和||
- 三元表达式
+ 生命周期函数
- constructor：只会在组件初始化的时候执行一次
- render：第一次以及之后组件发生更新，都会执行render
- componentDidMount：当前组件内的DOM节点全部加载完毕
- shouldComponentUpdate：当props或state发生变化，在重新渲染执行之前
- componentDidUpdate：当props或state发生变化，并且shouldComponentUpdate返回为true
- componentWillUnmount：当组件被销毁
- UNSAFE_componentWillMount：当组件被渲染出来之前
- UNSAFE_componentWillReceiveProps：当组件收到新的props之前
+ ref
- 在construtor中，创建一个ref变量
- 在jsx中，给目标节点添加一个ref属性，等于这个ref变量
- 获取这个变量，结果的current属性就是要获取的目标节点
+ 纯组件
- React自带的一个API
- 当props或state发生改变时，浅比较改变前后的值，如果不变，就不会重新渲染
+ 高阶组件
- React中的一种设计模块
- 其实就是一个函数，传入的参数是一个组件，导出的结果是一个新的组件
- 使用ES7的装饰器语法
- 安装插件
```
npm install @babel/plugin-proposal-decorators --save-dev
```
- 在config-overrides.js文件中添加
```
addDecoratorsLegacy()
```
- 先使用@加上高阶组件的名称，再正常导出被装饰的组件

## [antd-design-mobile](https://mobile.ant.design/docs/react/introduce-cn)
+ 安装
```
npm install antd-mobile --save
npm install babel-plugin-import --save-dev
```
+ 在config-overrides.js文件中添加如下代码
```
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
})
```
+ 使用：在jsx中，直接当成标签来使用
+ 如果需要引入外部文件
- 放在assets目录下
- 参与wepback的打包流程
- 使用相对路径或者@
- 放在public目录下
- 没有参与打包
- 路径抬头是%PUBLIC_URL%/

## [axios](https://www.kancloud.cn/yunye/axios/234845)
+ 对比fetch
- ES7引入的API
- 语义化，简洁，但是目前存在诸多问题
+ 安装
```
npm install axios --save
```
+ 配置
- 新建一个axios.js文件，添加以下内容
```
import axios from 'axios'
import {Toast} from 'antd-mobile'
axios.interceptors.request.use(function(config){
Toast.loading('加载中')

return config
}, function (error) {
return Promise.reject(error)
});
axios.interceptors.response.use(function(response){
Toast.hide()

return response.data
}, function (error) {
return Promise.reject(error)
})
export default axios
```
- 在index.js文件中，将axios添加到全局
- 创建上下文对象
- 使用Provider组件，在value中添加axios
+ 使用
- 在某个组件中，指定上下文对象
- 通过this.context.axios获取axios
+ 图片
- 本地图片
- img标签
- 如果src的值是写死的，直接写图片的相对路径，也可以将相对路径改成@抬头
- 无论src的值是否写死，都必须结合require方法
- 背景图片
- 如果将样式写在style中，url里面的路径必须是相对路径
- 如果将样式写在标签上，必须结合require方法
- 服务器返回的图片
- 后端不要返回请求路径前面的域名和端口号
- 前端在index.js文件中
- 配置http请求的公共路径
```
const commonUrl = `http://${process.env.NODE_ENV == 'development' ? 'localhost' : 'xiaobulaoshi.club'}:8888`
```
- 添加到Provider组件的value中
- 前端指定当前组件的上下文对象
- 前端在服务器返回的图片路径前面，手动添加this.context.commonUrl
+ 代理
- 安装插件
```
npm install http-proxy-middleware --save-dev
```
- 在src目录下新建一个setupProxy.js文件，添加
```
const proxy = require('http-proxy-middleware')
module.exports = function(app){
app.use(
proxy(
'/xiaobu/api',
{
target: 'http://localhost:8888',
secure: false,
changeOrigin: true,
pathRewrite: {
'^/xiaobu/api': ''
}
}
)
)
}
```
- 在axios的请求拦截器中添加axios请求的路径抬头
```
config.url = '/xiaobu/api' + config.url
```
- 将请求路径中的http://locahost:8888去掉
```