1.React中的准备工作
1.1使用Create-React-app创建项目和优势
学习成本低
无需学习和配置大量构建工具。实时页面刷新的功能让你更专注于代码开发。部署时,自动优化你的 bundle。
单一依赖
你的应用程序只需要安装一个依赖包。为了确保所有底层组件都能无缝地协同工作,我们对 Create React App 进行深度测试 —— 以避免出现版本不匹配所导致的麻烦。
未锁定配置
我们使用了 Webpack、Babel、ESLint 和其他优秀的项目作为基础层,为你的应用程序提供强劲的动力。如果你需要进行高级定制,则可以执行 Create React App 中的 "eject" 命令,根据需求自定义配置文件。
npx create-react-app 项目名称
如果要以ts的形式的话需要加上--template typescript,这样的话就是创建了一个reacte+ts语言的项目模板了
1.2使用vite的方式创建一个React的项目
npm create vite@latest reacte-ts-vite --template reacte-ts
vite是尤雨溪为vue开发出来的脚手架工具,搭建速度非常的快。
1.3使用prettier和eslint规范代码
安装代码:
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
确认安装完成后在.eslintrc.js文件中添加上一行代码,此时代码风格已经生效了
添加完之后,我们需要再添加一个名为prettier-code formatter的插件
之后我们需要去package.json文件下添加一行代码,这样就可以在终端中执行命令了npm run format
在文件夹中加一个.vscode>setting.json文件,意思是在保存的时候就要执行这个格式处理
如果想创建自己的prettier格式的话,就在根目录下创建一个.prettierrc.js文件
module.exports = {
//箭头函数只有一个参数的时候可以忽略括号
arrowParens: 'aviod',
//括号内部不要出现空格
bracketSpacing: true,
//行结束符使用Unix格式
endOfLine: 'lf',
//true: Put > on the last line instead of at a new line
jsxBracketSameLine: false,
//行宽
printWidth: 100,
//换行方式
proseWrap: 'preserve',
//分号
semi: false,
//使用单引号
singleQuote: true,
//缩进
tabWidth: 2,
//使用tab缩进
useTabs: false,
//后置逗号,多行对象,数组在最后一行增加逗号
trailingComma: 'es5',
parser: 'typescript'
}