react 脚手架

脚手架

脚手架相当于是命令行操作工具,为我们预设了 webpack 的打包配置以及各种项目初始化需要引入的包。

react 官方脚手架

1. react 官方提供的脚手架是 create-react-app

这个脚手架。可以通过下面这个命令全局安装官方脚手架。

shell 复制代码
npm i create-react-app -g
2. 创建项目
shell 复制代码
create-react-app [project-name]
+项目名称要遵循 npm 包命名规范:使用 "数字、小写字母、- " 命名,不出现特殊符号,中文或大写字母。

常用的 react 版本

16 项目使用较多

17 几乎跟 16 用法没有区别

18或者更高 默认最高版本

3. 默认项目配置解析
  1. 默认安装的包
    • react:react 的核心
    • react-dom: react 视图渲染的核心(基于 react 构建 webApp(html 页面))
      ---> react-native 构建移动端
    • react-scripts: 脚手架将 webpack 打包规则和其他配置都隐藏到了 node_modules 目录下,是对自己打包命令的封装,会自动调用webpack.
  2. package.json 介绍
    • scripts 调试 运行 打包 的命令
    • 浏览器的适配配置项
json 复制代码
"browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  }
  1. "eject": "react-scripts eject"
    可以使用这个命令暴露 webpack 以及其他脚手架的配置。
相关推荐
喜欢打篮球的普通人9 分钟前
LLVM前端和优化层
前端
大明者省3 小时前
AI 在课程思政的 10 大应用:从资源挖掘到效果升华
前端·人工智能·easyui
知否技术7 小时前
知道这10个npm工具包,开发效率提高好几倍!第2个大家都用过!
前端·npm
希希不嘻嘻~傻希希8 小时前
CSS 字体与文本样式笔记
开发语言·前端·javascript·css·ecmascript
石小石Orz8 小时前
分享10个吊炸天的油猴脚本,2025最新!
前端
爷_9 小时前
Nest.js 最佳实践:异步上下文(Context)实现自动填充
前端·javascript·后端
爱上妖精的尾巴9 小时前
3-19 WPS JS宏调用工作表函数(JS 宏与工作表函数双剑合壁)学习笔记
服务器·前端·javascript·wps·js宏·jsa
草履虫建模9 小时前
Web开发全栈流程 - Spring boot +Vue 前后端分离
java·前端·vue.js·spring boot·阿里云·elementui·mybatis
—Qeyser9 小时前
让 Deepseek 写电器电费计算器(html版本)
前端·javascript·css·html·deepseek
UI设计和前端开发从业者10 小时前
从UI前端到数字孪生:构建数据驱动的智能生态系统
前端·ui