因为组件化开发，必然会带来“工程化”的处理 也就是基于webpack等工具（vite/ rollup/ turbopack） - 实现组件的合并、压缩、打包等 - 代码编译、兼容、校验。。。 - 。。。
React的工程化/组件化开发可以基于webpack自己去搭建一套工程化打包的架子，但是这样非常的麻烦复杂，React官方提供了脚手架：create-react-app
脚手架：基于它创建项目，默认就把webpack的打包规则已经处理好，把一些项目需要的基本文件也创建好。
create-react-app基础运用 运用安装脚手架
npm i create-react-app -g （mac前面要设置sudo）检查安装情况(显示版本号即安装成功)
create-react-app --version基于脚手架创建React工程化的项目
create-react-app 项目名称项目名称要遵循npm包命名规范：使用”数字、小写字母、_“命名
默认项目目录 |- node_modules |- src：所有后续编写的代码，几乎都放在SRC下（打包时，一般只对这个目录下的代码进行处理） |- index.js |- public：放页面模板 |- index.html |- package.json |- …
注：项目目录结构出现package-lock.json，则代表是npm安装，改成yarn安装需删除package-lock.json、node_modules后重新执行yarn install
react常用版本很早之前是15版本（太早了） 16版本：一些项目用的最多的 17版本：最大的升级就是看不出升级（语法没变啥，只是底层处理机制上升级了）
18版本：新版本（机制和语法上都有区别）
脚手架默认安装18版本
一个React项目中，默认会安装 react：React框架的核心react-dom：React试图渲染的核心（基于React构建WebApp-HTML页面）react-native：构建和渲染App的react-scripts：脚手架为了让项目目录看起来干净一些，吧webpack打包的规则及香港的插件/LOADER等都隐藏到了node_modules目录下，react-scripts就是脚手架中自己对打包命令的一种封装，基于它打包，会调用node_modules中的webpack等进行处理web-vitals：性能检测工具package.json
{"name": "reactdemo","version": "0.1.0","private": true,"dependencies": {"@testing-library/jest-dom": "^5.17.0","@testing-library/react": "^13.4.0","@testing-library/user-event": "^13.5.0","react": "^18.2.0","react-dom": "^18.2.0","react-scripts": "5.0.1","web-vitals": "^2.1.4"},# 打包命令是基于react-scripts处理"scripts": {"start": "react-scripts start", # 开发环境：在本地启动web服务器，预览打包内容"build": "react-scripts build", # 生产环境：打包部署，打包的内容输出到dist目录中"test": "react-scripts test", # 单元测试"eject": "react-scripts eject" # 暴露webpack配置规则（因为我想修改默认的打包规则）},# 对webpack中ESLint词法检测的相关配置；词法检测：# - 词法错误（不符合标准规范）# - 符合标准，代码本身不会报错，但是不符合ESLint的检测规范# const num=20; num声明了但没有使用"eslintConfig": {"extends": ["react-app","react-app/jest"]},# 基于browserslist规范，设置浏览器兼容情况，# 1.postcss-loader+autoprefixer会给CSS3设置相关的前缀# 2.babel-loader 会把ES6编译为ES5"browserslist": {"production": [">0.2%", # 使用率超过0.2%的浏览器"not dead", # 不考虑IE"not op_mini all" # 不考虑欧朋浏览器],# 默认不兼容低版本和IE浏览器的"development": ["last 1 chrome version", # 谷歌只考虑最后一个版本"last 1 firefox version","last 1 safari version"]}}src目录删除多余文件，仅保留index.js
public目录删除多余文件
# 启动yarn start# 打包yarn build
