王迎旭的博客

1. Outlet 使用Layout模版的时候，中间的插槽 使用<Outlet /> import { Outlet } from "react-router-dom"; 2. createBrowserRouter() 来定义router的结构和格式 const router = createBrowserRouter ([ { path : "question" , element : < QuestionLayout /> , children : [ { path : "edit/:id" , element : < Edit /> , }, { path : "stat/:id" , element : < Stat /> , }, ], }, { path : "/" , element : < MainLayout /> , children : [ { path : "/" , element : < Home /> , }, { path : "/login" , element : < Login /> , }, { path : "/register" , element : < Register /> , }, { path : "manage" , element : < ManageLayout /> , children : [ { path : ...

 1) 普通方式 内联style + 引入CSS文件 条件 className: classnames, clsx     1> classnames         用法:  const itemClassName = classNames ( "list-item" , { published : isPublished });                              < div key = { id } className = { itemClassName } >                    or                2) CSS-Module 和Sass BEM: 规范(主观上) CSS-module 使用方法： 将.css 后缀 改为.module.css 在tsx文件中使用 import styles from "./xx/xxx.module.css"; 然后在JSX片段中使用  < div key = { id } className = { styles [ "list-item" ] } > 来引入 如果要结合classNames来使用，如下: const itemClassName = classNames ({ [ styles [ "list-item" ]]: true , [ styles .published]: isPublished , }); Sass:(less & sass 是CSS预处理语言) 后缀需改为.scss 允许嵌套 npm install sass --save 3) css-in-js解决方案: Styled-Co...

1) 组件 组件是一个UI片段，拥有独立的逻辑和显示 类型: Class组件, 函数组件 2) Hooks 1> useState     特点：      - 异步更新     - 可能会被合并          setCount(count + 1)           setCount(count + 1)           setCount(count + 1)               最后只会是初始值 + 1     但是           setCount(count => count + 1)           setCount(count => count + 1)           setCount(count => count + 1)               会是初始值 + 3     - 不可变数据 增删改 增: array.concat() 删: array.filter() 改: array.map() 状态提升： 子组件只执行父组件传过来的函数，数据显示。 immer:     install:      npm install immer --save          use:     import produce from 'immer'     1) setUserInfo(produce(draft => {    ...

1) 泛型 function print<T>(info: T) {     console.log(info); } print<string>('hello'); 2) 自定义类型 type PropsType = { id : string ; title : string ; isPublished : boolean ; }; 传入函数组件 3) FC const QuestionCard : FC < PropsType > = ( props ) => {} FC: Functional Component

 1. event.preventDefault() 2. event.preventPropagation()

 1. 标签 1) 首字母大写: 自定义组件 小写： HTML组件 2) 标签必须闭合 3) 每段JSX只能有一个根结点     Fragment: <></> 2. Style 1)  class -> className 因为在js ts中 class为关键字 2) style要使用js对象，而且key要用驼峰写法 style = {{ color: 'red', backgroundColor: 'white' }} 3) for -> htmlFor 3. Event 1) onXxx e.g. <button onClick={() => {}}></button> or const fn = () => {xxx} onClick = {fn} if want to pass event: const fn = (event: MouseEvent<HTMLButtonElement>) => { event.preventDefault(); event.stopPropagation(); } if want to pass another variable const fn = (event: MouseEvent<HTMLButtonElement>, name: string) {     event.preventDefault(); console.log(name); } <button onClick={event => {fn(event, 'yourname')}}> 2) 必须传入一个函数 (fn 而不是 fn(), 表引用) 3) 直接定义组件 function Hello() { if(a) return <p>a</p> else return <p>b</p> } <Hello></Hello> 4) 不要用index作为map的key

http-server -c-1 -p 8882 -c is to disable cache

 Vite: 构建工具 + 打包工具 Vite比Create-React-App 打包项目更快， 因为使用了ES Module的语法 每个js文件都为一个module, 可以在一个js里面import另外的， 比较快 Webpack:传统打包方式，把所有包打包成main.js 塞给html文件 比如 main.js, math.js, now.js, 会合并成一个文件 塞给html文件

1. eslint:  检查语法语义，变量未定义，定义未使用 1) use npm to install: npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev 2) init in project npx eslint --init 3) install eslint extension in VSCode 4) detect in package.json add a script: "lint" : "eslint 'src/**/*.+(js|ts|jsx|tsx)' " then run: npm run lint 2. prettier 检查编码风格，如每一行末尾是否加分号 1) use npm to install: npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev 2) in eslintrc.js file, in extends, add one line: "plugin:prettier/recommended" 3) install prettier extension in VSCode 3) detect and correct: in package.json - scripts, add one line: "format" : "prettier --write 'src/**/*.+(js|ts|jsx|tsx)' " Then run npm run format 4) 保存自动修改 创建.vscode 文件夹，里面创建settings.json 加入以下内容： { "editor.codeActionsOnSave" : { "source.fixAll.eslint" : true } } 3. husky pre-commit checking 1) install:  npm install ...

-Install npm install -g create-react-app -create js: create-react-app my-app ts: create-react-app survey --template typescript -Start yarn start npm run start binding: class TodoList extends Component { constructor ( props ) { super ( props ); this . state = { inputValue : '11' , list : [] } } render () { return ( < div > < input value = {this . state . inputValue } /> < button > 提交 </ button > < ul > < li > English </ li > < li > Chinese </ li > </ ul > </ div > ) } } -ajax request yarn add axios -charles proxy - mock json response http://localhost.charlesproxy.com:3000/ -antd yarn add antd -redux yarn add redux -create store create folder store under src create index.js under store -react-redux yarn add react-redux -styled-component yarn add styled-components -testing Error: cannot import module revise  "test" :   "react-scripts test --transformIgnorePatterns   \" node_modu...

We cannot upload files larger than 50MB to Github. However, we can use LFS to upload. Steps: 1. In Mac use: brew install git-lfs 2. Then use the command: git lfs install 3. Use the command: git lfs track "*.sqlite" 4.  git lfs push --all origin main 5.  git add . 6. git commit -m "xxx" 7.  git push