React第二章(开发环境搭建 )

React开发环境搭建

选择一个你喜欢的目录,然后运行以下命令:

sh 复制代码
npm init vite
  • 执行完成之后会让你输入项目名称 例如 react-demo
  • 接下来会让你选择一个框架 这时候选择 react
  • 然后选择 TypeScript + SWC 如果你不会ts就选择js

目录介绍

  • public 公共目录
  • src
    • assets 静态资源
    • App.css 根组件样式
    • App.tsx 根组件
    • index.css 全局css文件
    • main.tsx 全局tsx文件
    • vite-env.d.ts 声明文件
  • .eslintrc.cjs eslint配置文件
  • .gitignore git忽略文件
  • index.html 入口文件index.html
  • package.json 项目依赖模块文件
  • tsconfig.json ts配置文件
  • tsconfig.node.json vite-ts配置文件
  • vite.config.ts vite配置文件

FAQ:

  • public公共目录和assets静态资源有什么区别?

答:public目录的资源编译之后会存放到根目录,而静态资源assets是会随着项目一起打包的,public则不会被编译。

  • 为什么main.tsx的document.getElementById('root')!要加一个!

答:因为document.getElementById('root')返回可能为空,这时候就会报错。!是非空断言,告诉编辑器这个表达式不会为空。

命令介绍(package.json)

json 复制代码
"dev": "vite",//启动开发模式项目
"build": "tsc && vite build", //打包构建生产包
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",//代码检查
"preview": "vite preview" //预览模式

eslint命令详解

sh 复制代码
eslint .:对当前目录(以及子目录)中的文件运行 ESLint。
--ext ts,tsx:指定要检查的文件扩展名为 .ts 和 .tsx,即 TypeScript 和 TypeScript React 文件。
--report-unused-disable-directives:报告未使用的 eslint-disable 指令。这可以帮助你清理不再需要的 ESLint 禁用指令。
--max-warnings 0:将警告数量限制为 0。如果有任何警告,ESLint 将返回非零退出代码,这通常用于在 CI/CD 环境中确保代码库没有任何警告。
相关推荐
没资格抱怨9 分钟前
vue3中利用路由信息渲染菜单栏
前端·vue.js
TttHhhYy12 分钟前
vue写后台管理系统,有个需求将所有的$message消息提示换成确认框来增强消息提示效果,遇到嵌套过多的情况,出现某些问题
前端·javascript·vue.js·anti-design-vue
北京_宏哥39 分钟前
《最新出炉》系列入门篇-Python+Playwright自动化测试-50-滚动条操作
python·前端框架·测试
FIRE43 分钟前
uniapp小程序分享使用canvas自定义绘制 vue3
前端·小程序·uni-app
四喜花露水44 分钟前
vue elementui el-dropdown-item设置@click无效的解决方案
前端·vue.js·elementui
jokerest1231 小时前
web——sqliabs靶场——第五关——报错注入和布尔盲注
前端
焦糖酒1 小时前
终端应用开发沉思录
javascript·前端框架
谢尔登2 小时前
前端开发调试之 PC 端调试
开发语言·前端
每天吃饭的羊2 小时前
在循环中只set一次
开发语言·前端·javascript
_默_4 小时前
adminPage-vue3依赖DetailsModule版本说明:V1.2.1——1) - 新增span与labelSpan属性
前端·javascript·vue.js·npm·开源