1.前端开发一定是组件化/模块化
(1).有利于团队协作开发
(2).便于组件的复用,提高开发效率,方便后期维护,减少页面中的冗余代码
2.如何划分组件
业务组件:针对项目需求封装的
(1).普通业务组件(无复用性,只是单独拆出来的一个模块)
(2).通用业务组件(具备复用性)
功能组件:适用于多个项目(UI组件)
(1).通用业务组件
3.组件化开发,必然会带来“工程化”的处理
也就是基于webpack等工具(vite/rolllup/turbopack这三个打包速度比webpack快)
(1).实现组件的合并,压缩,打包等
(2).代码编译,兼容,校验等
4.React的工程化/组件化开发
可以基于webpack自己去搭建一套工程化打包的架子,但是会非常麻烦复杂,react官方为我们提供了一个脚手架create-react-app
脚手架基于它创建项目,默认就把webpack的打包规则处理好了,把一些项目需要的基本文件也都创建好了
5.create-react-app基于运用
npm i create-react-app -g (mac的要设置sudo)
检查安装情况
create-react-app --version
基于脚手架创建React工程化的项目
create-react-app 项目名称
项目名称要遵循npm包命名规范:使用“数字,小写字母,下划线”命名