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 以及其他脚手架的配置。
相关推荐
GIS之路15 小时前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug15 小时前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu1213815 小时前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中16 小时前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路16 小时前
GDAL 实现矢量合并
前端
hxjhnct16 小时前
React useContext的缺陷
前端·react.js·前端框架
前端 贾公子16 小时前
从入门到实践:前端 Monorepo 工程化实战(4)
前端
菩提小狗16 小时前
Sqlmap双击运行脚本,双击直接打开。
前端·笔记·安全·web安全
前端工作日常16 小时前
我学习到的AG-UI的概念
前端
韩师傅17 小时前
前端开发消亡史:AI也无法掩盖没有设计创造力的真相
前端·人工智能·后端