前言

当前以及未来的前端开发，一定是：组件化/模块化

  @1 有利于团队协作开发

  @2 便于组件的复用：提高开发效率、方便后期维护、减少页面中的冗余代码

  ...

如何划分组件

业务组件：针对项目需求封装的

@1 普通业务组件「没有啥复用性，只是单独拆出来的一个模块」

@2 通用业务组件「具备复用性」

功能组件：适用于多个项目「例如：UI组件库中的组件」

@1 通用功能组件

因为组件化开发，必然会带来“工程化”的处理

也就是基于webpack等工具「vite/rollup/turbopack...」

• 实现组件的合并、压缩、打包等
• 代码编译、兼容、校验等
• ...
  

React的工程化/组件化开发

react常用的版本
很早之前是15版本「太早了」
16版本：一些项目用的最多的
17版本：最大的升级就是看不出升级「语法没变啥，只是底层处理机制上升级了」
—
18版本：新版本「机制和语法上都有区别」

我们可以基于webpack自己去搭建一套工程化打包的架子，但是这样非常的麻烦/复杂；
React官方，为我们提供了一个脚手架：create-react-app！！

• 脚手架：基于它创建项目，默认就把webpack的打包规则已经处理好了，把一些项目需要的基本文件也都创建好了！！

1. 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

      |- ...

public作为根目录 package.json解析

一个React项目中，默认会安装：

    react：React框架的核心

    react-dom：React视图渲染的核心「基于React构建WebApp（HTML页面）」

         ---> react-native：构建和渲染App的

    react-scripts：脚手架为了让项目目录看起来干净一些，把webpack打包的规则及相关的插件/LOADER等都隐藏到了node_modules目录下，react-scripts就是脚手架中自己对打包命令的一种封装，基于它打包，会调用node_modules中的webpack等进行处理！！