React项目实践

TypeScript是什么？ TypeScript 是 JavaScript 的类型超集，可编译为纯 JavaScript 不错的总结文档 : TypeScript 入门教程 Typescript的快

宝贝GOGO 基于React /React Router /自定义Hooks /Webpack 实现的极简记事本 特点是一键快速记账，这是为了满足我给小朋友备注学习进度而开发的练手项目 该项目使我对T

代码 git@github.com:dswang2/come-up-account.git build 用什么命令，看package.json,得知部署的命令： yarn build 代码已经buil

持久化 其他 安装classnames支持库 使用，classnames可以合并class 日期时间库 dayjs yarn add dayjs import dayjs from 'dayjs'

自定义hook 封装hook，但是文件名，函数名，要用useXyz这种，一个简单的自定义hook如下： React Route 之 react Link标签 在react router v6 中，不再

React18 函数组件的定义，并React16更规范 或者 想用props.children 遇到报错 Property 'children' does not exist on type '{}'

一些零散的CSS记忆 内阴影 box-shadow: inset 0 -5px -5px rgba(0,0,0,0.25);，加了inset是内阴影，没加是外阴影；第1个0表示x轴的偏移量；第2个参数

activeClass Link标签点击时，没有变色，没有效果，用NavLink，然后添加active class属性 搜索，activeClass 使用的官方介绍，https://reactrout

涉及到子类的传入，就是抽组件，就是造轮子 原来的代码 这个代码有个问题，就是错误页面下面也有标签导航Nav，因此只有把导航放在每一个实际的页面下，如 但是，标签页、统计页、记账页都差不多，因此要封装一

我与重复不共戴天 需要封装的代码 封装代码 抽出想通部分，封装一个函数组件Icon 函数组件接收的参数，自定义类型， require一个目录或者一个文件夹 __WebpackModuleApi报错是因

SVG作为图片使用 https://www.iconfont.cn/ ， 在网站找到图标，下载svg图片，得到如 money.svg 得到的图片拷贝在工程目录里 在想要使用图片的位置导入图片impor

重置样式 创建index.scss文件， 在index.scss文件中重置样式 在index.tsx中引入index.scss https://juejin.cn/post/7113475274280

``` @import-normalize; * { margin: 0; padding: 0; box-sizing: border-box; } button, input, select, t

Router的两种模式: History : BrowserRouter，有后台服务器，配置所有路径到首页 Hash : HashRouter，不需要有后台服务器，url上多个#号 HasRouter

安装React Router https://reactrouter.com/ yarn add react-router-dom@6 yarn add --dev @types/react-rout

概念：模板字符串 安装styled-components https://github.com/styled-components/styled-components 安装命令 yarn add st

配置 CSS直接引用 @import "core/pro-coms.scss"; 总是无效，最后还是在根目录npm install大法解决 参考：https://blog.csdn.net/D4938

CSS normalize处理 css normalize 是保证页面再不同浏览器上默认样式相近 css reset 是重置样式 让react项目支持scss： dart-sass 按照cra文档，

目录说明 node_modules // node依赖 public // 静态文件 index.html // 首页 robots.txt // 屏蔽搜索网站的设置 src App.tsx // 主

# 课前准备 node.js v10以上，我偶然用到了16.12.0版本，以这个版本为准 ``` nvm install 16.12.0 // 安装出现问题，用管理员权限打开power