-
有利于团队开发
-
便于组件的复用: 提高开发效率/方便后期维护/减少页面中的冗余代码
如何划分组件
业务组件 : 针对项目需求封装的
-
普通业务组件 [没啥复用性,只是单独拆分出来的一个业务模块]
-
通用的业务组件 [具备复用性]
功能组件: 适用于多个项目 [例如 UI 组件库中的组件]
-
通用型功能组件
因为组件化开发,必然会带来 ‘工程化’ 的处理
-
也就是基于 webpack 等工具 [vite/rollup/turbopack…]
-
实现组件的合并/压缩/打包等
-
代码编译/兼容/校验等
React 的工程化/组件化开发
-
我们可以基于
webpack自己去搭建一套工程化打包的架子,但是这样非常的麻烦/复杂; React官方, 为我们提供了一个脚手架create-react-app -
create-react-app
-
脚手架: 基于它创建项目,默认就把webpack的打包规则处理好了,把一些项目需要的基本文件也创建好了
-
安装脚手架
npm i create-react-app -g [mac 前面要加 sudo]
# 检查安装情况
create-react-app --version
# 基于脚手架创建 react 项目,项目名称要遵守npm规则:使用 数字/小写字母/_ 命名
create-react-app 项目名称
项目目录
-
src : 所有后续编写的代码,几乎都放在
src目录下 [打包的时候,一般只对这个目录的代码进行处理] -
public : 页面模板
一个 React 项目中,默认会安装:
-
react: React框架的核心
-
react-dom: React视图渲染的核心 [基于 React 构建WebApp(HTML页面)]
-
react-native: 构建和渲染App的
-
react-scripts: 脚手架为了让项目目录看起来干净一些, 把webpack打包的规则及相关的插件/LOADER等都隐藏到了 node_modules 目录下, react-scripts 就是脚手架中自己对打包命令的一种封装,基于它打包,会调用 node_modules 中的 webpack 等进行处理
暴露配置代码
git add -A
git commit -m 'init'
pnpm eject
