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文件