react项目从零开始搭建，上手react如此简单_recartjs

初始化项目

• 安装

npx create-react-app myreact
1

• 结构

• package.json：包管理文件
• node_modules：局部安装的第三方模块
• .gitignore：被git忽略的目录或者文件
• src：开发目录
• index.js：整个项目的入口文件
• app.js：根组件
• public：存放项目模板文件，以及通过href或者src引入的外部文件
• readme.md：说明文档

• vscode插件：ES7 React/Redux
• react-devtools

配置

• 安装

• 修改默认配置

npm install react-app-rewired customize-cra --save-dev
1

• 使用路由

npm install react-router-dom --save
1

• 使用sass

npm install node-sass --save-dev
1

• 使用多个类名

npm install classnames --save
1

• 新建

• 在项目根目录下新建一个config-overrides.js

const {override,addWebpackAlias,useEslintRc} = require('customize-cra')
const path = require('path')

module.exports = override(
addWebpackAlias({
'@': path.resolve(__dirname, 'src/'),
}),
useEslintRc()
)
1
2
3
4
5
6
7
8
9

• 在项目根目录下新建一个.eslintrc

{
"extends": "react-app",
"rules": {
"no-undef": "off",
"no-restricted-globals": "off",
"no-unused-vars": "off",
"eqeqeq": "off"
}
}
1
2
3
4
5
6
7
8
9

• 使用

• 修改项目根目录下的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"
}
1
2
3
4
5
6

• 启动项目

npm run dev
1

• 将css文件全部改成scss

路由

• index.js

• 引入

import {HashRouter} from 'react-router-dom' 
1

• 使用

<HashRouter><App /></HashRouter>
1

• App.js

• 引入

import {Route,Switch,Link,NavLink} from 'react-router-dom'
import routes from './routes.js'
1
2

• 使用

<Switch>
{
routes.map(e => <Route {...e} />)
}
</Switch>
1
2
3
4
5

• routes.js

• 从vies目录引入路由组件
• 在routes中添加这个路由的path、key和component
• 添加exact为true，表示严格匹配

组件

• 类型
• 按定义方式
• 函数：一个函数就相当于一个组件
• 无状态：只能接收props，没有state、ref和生命周期
• 受控：当props改变，组件的内容才会更新
• 展示：充当UI组件
• 类：使用es6的class定义一个组件
• 有状态：既能接收props，又能定义state，还有ref和生命周期
• 非受控：除了props，改变state，视图也会变
• 处理逻辑：调用函数，改变状态，渲染视图
• 按功能划分
• 路由：在views目录下
• 复用：在components目录下
• 创建
• 引入
• 类库

import React, {Component} from 'react'
import classnames from 'classnames'
1
2

• 样式
• 全局样式

import './index.scss'
1

• 模块化样式

import styles from './index.module.scss'
1

• 生成
• 使用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 组件名
1

组件

• 条件渲染

• 不能在花括号里写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
1

• 在config-overrides.js文件中添加

addDecoratorsLegacy()
1

• 先使用@加上高阶组件的名称，再正常导出被装饰的组件

antd-design-mobile

• 安装

npm install antd-mobile --save
npm install babel-plugin-import --save-dev
1
2

• 在config-overrides.js文件中添加如下代码

fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}) 
1
2
3
4

• 使用：在jsx中，直接当成标签来使用
• 如果需要引入外部文件

• 放在assets目录下
• 参与wepback的打包流程
• 使用相对路径或者@
• 放在public目录下
• 没有参与打包
• 路径抬头是%PUBLIC_URL%/

axios

• 对比fetch

• ES7引入的API
• 语义化，简洁，但是目前存在诸多问题

• 安装

npm install axios --save
1

• 配置

• 新建一个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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 在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`
1

• 添加到Provider组件的value中
• 前端指定当前组件的上下文对象
• 前端在服务器返回的图片路径前面，手动添加this.context.commonUrl

• 代理

• 安装插件

npm install http-proxy-middleware --save-dev
1

• 在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': ''
}
}
)
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 在axios的请求拦截器中添加axios请求的路径抬头

config.url = '/xiaobu/api' + config.url
1

• 将请求路径中的http://locahost:8888去掉