创建React项目
Create-react-app
官网:https://create-react-app.bootcss.com/
## 使用 npx
npx create-react-app my-app --template typescript
## 使用 npm
npm init react-app my-app --template typescript
## 使用 yarn
yarn create react-app my-app --template typescript
项目结构
项目入口 src/App.js
Vite
官网:https://cn.vitejs.dev/
npm create vite@latest react-demo-vite --template react-ts
yarn create vite react-demo-vite --template react-ts
项目结构
项目入口 src/App.tsx
编码规范 - eslint prettier husky 等
-
合理、规范的注释
-
代码合理拆分
-
eslint (编码规范,如变量未定义(语法语义))
// 安装插件 npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -save-dev // 初始化配置文件 .eslint.js npx eslint --init ## 根据引导一步一步走 解释: eslint plugin 与 extend的区别: 1. extend 提供的是 eslint 现有规则的一系列预设 2. plugin则提供了除预设之外的自定义规则,当你在eslint的规则里找不到合 适的规则的时候就可以借用插件来实现了 注释:安装eslint就可以看到代码中未使用的变量的错误 在package.json中增加 scripts `"lint": " eslint 'src/**/*.+(js|ts|jsx|tsx)' "` 控制台运行 npm run lint 也可以看到错误提示。 如果要自动修复,可以加 --fix参数
-
prettier (编码风格,如末尾是否用;)
npm install prettier eslint-config-prettier eslint-plugin-prettier -save-dev eslint-config-prettier 禁用所以和prettier 产生冲突的规则 eslint-plugin-prettier 把prettier应用到Eslint,配合rules"prettier/prettier":"error"实现Eslint提醒。 在eslint配置文件的extends最后 增加 'plugin:prettier/recommended' 在package.json中增加scripts `"format": " prettier --write 'src/**/*.+(js|ts|jsx|tsx)' "` 控制台运行 npm run format可以修复所以的格式错误
-
eslint 也有编码风格的功能,连着可能会有冲突
-
Vite 和 webpack区别
Create React App 是使用webpack作为打包工具,和vite是竞品
区别
vite 启动速度更快,使用ES Module
语法,开发环境节省打包的过程
CRA或webpack使用者更多,时间更久,插件更丰富
JSX语法
标签
首字母小写 - HTML 标签
首字母大写 - 自定义组件
可以像HTML一样嵌套
标签必须闭合
每一段jsx只能有一个根节点,或者使用<> </> (Fragment)
属性
和HTML属性基本一样,但有些和JS关键字冲突了
class
要改为 className
style
要写成js对象(string),key采用驼峰写法
for
要改成 htmlFor
事件
onXxx
的形式
function clickHandler(event: React.MouseEvent<HTMLParagraphElement>){
event.preventDefault()
console.log('clicked')
}
return <p onClick={clickHandler}>hello world</p>
import React, { FC, MouseEvent } from 'react'
// 代码解析
/*
FC:(Function Component)
在TypeScript结合React开发时,React.FC(或React.FunctionComponent)是一个泛型,它用于定义函数组件的类型。
这个类型定义了函数组件的结构和预期行为,并且提供了泛型支持,以便你可以指定组件props的类型
*/
// 例 定义Props类型 通过泛型参数,React.FC允许你指定props的类型
type MyComponentProps = {
message: string;
};
const MyComponent: React.FC<MyComponentProps> = ({ message }) => {
return <div>{message}</div>;
};
const MyComponent: React.FC = ({ message:string }) => {
return <div>{message}</div>;
};
// 通过type类型 props定义,更有利于维护和可读性
js表达式
{xxx}
格式表示一个JS变量或表达式,可用于
- 普通文本内容,或判断、循环
- 属性值
- 用于注释
判断
运算符 &&
三元运算符 a ?b:c
用函数封装
const flag = true
return <div>
{flag && <p>hello</p>}
{flag ? <p>你好</p> : <p>再见</p>}
</div>
// 函数封装
function Hello() {
if (flag) return <p>你好</p>
else return <p>再见</p>
}
return <Hello></Hello>
循环
const list = [
{ username: 'zhangsan', name: '张三' },
{ username: 'lisi', name: '李四' },
{ username: 'shuangyue', name: '双越' },
]
const ul = <ul>
{list.map(user => {
return <li key={user.username}>{user.name}</li>
})}
</ul>
JSX循环必须有key
-帮助React识别那些元素改变了,比如被添加或删除。
同级别key
必须唯一
key
是不可改变的 尽量不要用index,要用业务ID
key
用于优化 VOM dIff算法
显示HTML代码
JSX 防止注入攻击,用 `dangerouslySetInnerHTML={{ __html: 'xxx' }}`
const rawHtml = '<script>alert("This could be malicious!");</script>';
const MyComponent = () => (
<div dangerouslySetInnerHTML={{ __html: rawHtml }} />
);