day01复习做React项目中的步骤

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'
}