Offer 驾到，掘友接招！我正在参与2022春招系列活动-经验复盘，点击查看 活动详情。
去年的3月份，客户有个小的内部用的目标管理系统。有设计人员出画面的 HTML，开发语言的话我们自己决定。
之前用过 Vue，网上的评价都是简单好学。然后也有说用 React 的，React 的评价大多是一开始会觉得很难，掌握了一些主要概念后就觉着很好用了。
React 前端构建
之前没有 React 经验，也没有太多前端经验，不知道怎么入手。 只好先在官网上学习。
最后还是用最简单的 create-react-app 创建的工程。
npx create-react-app my-app
也不会 Webpack ，也不会 TypeScript，所以最后还是决定用基本的 javascript 来写代码。
用到的一些包：
- 路由： react-router-dom
- 路由缓存： react-router-cache-route
- 多国语言：react-i18next
- 网络请求：axios
- 日历组件：react-date-picker
- 分页组件：用的 ant-design 的分页组件，自己修改的样式
- 等
jQuery 代码迁移为 React 代码
设计人员出的 HTML ，已经加上了一些按钮动作，样式变化，但是是用 jQuery 作的，所以相同的处理，还要都改成 React 代码。
例如：
- jQuery 对 CSS 的操作，换成 React 的添加移除 CSS 属性名。
- jQuery 的 ajax 请求替换成 React 的 axios 。
- jQuery 绑定的事件换成 React 的写法。
也碰到了一些问题，jQuery 有一些方法自带动画效果，但是 React 里是直接切换状态没有动画效果。自己也不会写，后来在 npm 上找了半天，才找到一个库解决了。
在下面文章中记录了一下。
React组件 - 折叠展开组件之@kunukn/react-collapse - 掘金 (juejin.cn)
React 的 HOOK 钩子
Hook 是 React 16.8 的新增特性，很多旧的 React 项目还是用 Class 定义。 网上很多文章都力荐 HOOK，我也没有用 Class，完全用的 HOOK 。
HOOK 掌握了基本用法后觉着相当顺手。
项目中用到的 HOOK 主要是 useState、 useReducer、 useEffect 。 useRef 用得不多，它直接关联DOM，不到非用不可的时候，不建议使用。 简单的页面使用 useState ，复杂的页面使用 useReducer。 useEffect 这个单个页面中可以写多个，一开始不知道，对于不同条件的副作用响应很抓瞎，后来才知道能写多个，直接豁然开朗。
404页面
一般的页面左边上面都有菜单栏导航栏，其余是主要内容部分。 如果内部部分404了，只是内部部分显示404，还是会带着菜单栏导航栏，无法显示单独的404页面。 在一个同事的帮助下，解决了这个问题，记录在下面的文章中。
React (react-router-dom) 单页应用跳转到单独的404页面 - 掘金 (juejin.cn)
项目前端需要学习的知识超级多，先写这些。
