react 复杂低代码项目 - 问卷星

• 3个模块，10+个页面，300+功能，2w行代码
• 其中问卷编辑器50+功能
• 包含了react 大量复杂应用

表单组件，ajax网络请求，状态管理，问卷编辑器， 性能优化，单元测试

react核心价格：1，组件化。2.数据驱动视图

刚开始接触，一些术语看不懂没关系，继续学, react其实很简单， 说react难的人，可能是js不熟练

组件化

组件化：拆分页面结构，通过组件拼装页面，复用组件。易开发，易维护。

数据驱动

只关注数据的修改，不用再操作dom，增加开发效率。

react创建项目，配置编码规则， 提交到git仓库

1.使用create-react-app创建react项目
2.使用vite创建react项目
3.使用eslint prettier husty等，制定编码规则
4.默认使用ts

以下是node 18版本，注意：node版本太低不能运行项目
vite官网：https://cn.vitejs.dev/
vite创建项目：npm create vite@latest my-vue-app --template react-ts

1.安装nodejs，16， 或18版本
2.设置淘宝镜像源： npm config set registry https://registry.npm.taobao.org
获取当前设置的镜像源：npm config get

使用prettier统一规范代码风格：

• 1.安装eslint，prettier插件
  npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

• 2.配置eslint

// .eslintrc.cjs
 extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
+   'plugin:prettier/recommended'
  ],

• 3.vscode配置Prettier插件：Prettier - Code formatter

• 4.修改package.json文件

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
+    "format": "prettier --write 'src/**/*.+(js|ts|jsx|tsx)'"
  },

执行npm run format， 这个时候发现文件里面的单引号，都变成了双引号。
新建文件.vscode/settings.json：

// .vscode/settings.json
{
    // 告诉vscode文件在保存的时候就执行eslint
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

创建.prettierrc.js文件，制定规范

module.exports = {
    // 箭头函数只有一个参数的时候可以忽略括号
    arrowParens: 'avoid',
    // 括号内部不要出现空格
    bracketSpacing: true,
    // 行结束符使用 Unix 格式
    endOfLine: 'lf',
    // true: Put > on the last line instead of at a new line
    jsxBracketSameLine: false,
    // 行宽
    printWidth: 100,
    // 换行方式
    proseWrap: 'preserve',
    // 分号
    semi: false,
    // 使用单引号
    singleQuote: true,
    // 缩进
    tabWidth: 2,
    // 使用 tab 缩进
    useTabs: false,
    // 后置逗号，多行对象、数组在最后一行增加逗号
    trailingComma: 'es5',
    parser: 'typescript',
  }

coding.net

使用husky执行pre-commit检查提交代码,避免提交非规范的代码

一个git hook工具，在git commit之前执行自定义的命令，如执行代码风格的检查，避免提交非规范代码。
npm install husky -D

• react内置了很多hooks，
• 学会自定义hooks(复用代码)，
• 学会第三方hooks（效率高）

npm install ahooks --save

state是异步更新，无法直接拿到最新的state值如果一个变量不用于jsx中显示，那就不要用setSatte来管理它，用useRef

classnames， clsx：解决多个className合并
css module:解决css名字重复的问题。create-react-app原生支持css module
css-in-js:在css中些js
styled-components: https://styled-components.com/

定义路由结构 - 需要安装：react-router-dom

npm install react-router-dom --save

import { useNavigate, Link } from ‘react-router-dom’
// 按钮跳转：useNavigate
const nav = useNavigate()
nav(‘/login’)
nav({
pathname: ‘/login’,
search: ‘a=10’
})
// url链接跳转

解析动态理由参数：
import { useParams } from ‘react-router-dom’
const { id } = useParams()

解析当前url参数
import { useSearchParams } from ‘react-router-dom’
const [searchParams] = useSearchParams()
console.log(useSearchParams.get(“keyworlds”))

npm install antd @ant-design/icons --save

// 获取当前路径
const { pathname } = useLocation()

渐变色工具：https://color.oulu.me/

Tailwind css 样式库不收费，有点类似于bootstrap
Tailwind ui收费
表单验证工具：formik

搭建mock服务：其实就是使用mockjs，

npm install mockjs --save
npm install @types/mockjs --save

mockjs只能劫持XMLHttprequest,不能劫持fetch，因此使用axios, 因为axios内部使用的是XMLHttprequest api。在生产环境需要注释掉mockjs，否则线上环境也会劫持请求。结论：不推荐在项目中直接使用mockjs

npm install axios --save

mockjs2大功能：1.劫持ajax，2.random能力

使用在线mock服务平台（不推荐使用）：例如： fast mock，Y-API, Swagger（国外平台）
1.存在敏感数据泄漏问题（例如：公司数据泄漏问题）
2.不稳定，不维护，网络不稳定问题

推荐使用：nodejs + mockjs， 也就是前端自己搭建一个简单的node服务。

在使用 create react app脚手架创建的项目中，如果需要扩展webpack，则使用craco,则需要安装：
https://github.com/dilanx/craco

npm i -D @craco/craco

文档：https://craco.js.org/docs/configuration/devserver/

组件之间公共逻辑怎么复用呢？自定义hook，实现逻辑的复用。

生成随机uuid

npm install nanoid --save