前端开发模式：组件化/模块化
优势： 1、有利于团队协作开发， 2、便于组件复用：提高开发效率、方便后期维护、减少页面中冗余的代码；
开发中如何划分组件 业务组件 普通业务组件「没有复用性」只是单独拆分出来的一个模块 通用业务组件「具备复用性」
功能组件 通用的功能组件
因为组件化开发，带来“工程化” 的处理 也就是基于webpack等打包工具（vite/rollup/turbopack） 实现组件的合并、压缩、打包等 代码编译、兼容、校验
react 的工程化/组件化开发
1:可以使用webpack 自己去搭建一套工程化打包的架子，需要对webpack配置非常熟悉，复杂， react官方提高一套脚手架 create-react-app create-react-app 脚手架：基于它可以快速创建项目，默认就把webpack 的 打包规则（配置规则）已经出来好了，把一些项目需要的基本文件也都创建好了
create-react-app 基本使用 安装脚手架 npm i create-react-app -g (mac电脑 sudo npm i create-react-app) 检查安装情况 create-react-app -version
基于脚手架 创建的react 工程化项目 create-react-app 项目名称 注意项目名称遵循npm包命名规范： 数字 小写字母 _
项目目录
node_modules
src: 所有后续写的代码 几乎都放在src 下 「打包的时候」，一般只对这个目录下的代码进行处理
index.js
public: 放页面模版
index.html
package.json 配置项
...
一个react 项目， 默认回安装：
react：react 框架的核心
react-dom： react 视图渲染的核心，「基于react构建WebApp（HTML页面）」
react-native：构建和渲染App
react-script：脚手架为了让给你项目目录看起来简洁，把webpack打包的规则及相关插件/loader 等隐藏到node_module目录下，react-script就是脚手架中自己对打包命令的一种封装，基于它打包，会调用node_module中的webpack等进行处理
html文件：
