React：工程化开发

③ 安装/运行/编译的环境，可以直接跑起来

2. 使用脚手架开发的项目一定是要遵循模块化、组件化、工程化的；在react中提供了一个用于创建react项目的脚手架库: create-react-app

3. 通常项目的整体技术配置是：react + react-?? + es6/7

2. 操作步骤

1. 全局安装create-react-app

npm install create-react-app -g

yarn add create-react-app -g

检测是否成功

create-react-app --version

图示

2. 创建一个脚手架项目

① 第一步

1. create-react-app hk-react-demo

2. cd hk-react-demo

3. npm start

② 第二步

运行

成功截图

③ 第三步

1. 脚手架项目结构和运行结果

① React.StrictMode：在开发模式下使用严格的语法模式

1. 作用

1）识别具有不安全生命周期的组件

2）有关旧式字符串ref用法的警告

3）关于已弃用的findDOMNode用法的警告

4）检测意外的副作用

5）检测遗留 context API

2. 注意

严格模式检查只在开发模式下运行，不会与生产模式冲突

② serviceWorker.unregister()

1. 作用

渐进式 Web 应用程序(PWA)

2. 使用

如果你希望应用程序能脱机工作并加载更快

那么可以将unregister() 改为 register()

但是，存在一些陷阱，慎用

2. 去除杂七杂八，写一个最精简的React案例，如下图所示：

① 图示

② 效果

三、脚手架案例-日程表

---

1. 概述

1. 日程表案例无论是在react中，还是在vue中都是十分经典的入门级Demo，非常有助于帮助我们理解和吸收脚手架开发思想，以及vuex或者react-redux状态管理。

2. 我们先不用redux状态管理方式实现, 而是采用传统的方式实现, 看看多组件数据如何传递和回传?

3. 案例运行效果如下

2. 案例技术点拆解

1. 多组件拆解和组合

2. 多组件数据传递

3. 父子组件事件回传

3. 案例实现步骤

1. 使用命令create-react-app hk-todo创建一个新的项目

2. 删除不需要的代码文件

3. 将index.js和App.js中的代码删除掉

4. 新建组件components文件夹，并在其中新建头部、尾部、列表、列表项组件

4. 案例核心代码

1. 静态组件拆分, 组合

呈现效果

注意点：必须要充分考虑组件该拆分到什么度才合适, 拆的太细, 数据传递链条太长; 拆的太大, 耦合性太高!

2. 列表逻辑实现

注意：采用父子组件传递数据和回传, 两层没问题, 但是多层后问题就逐步显现!

3. 头部实现

核心代码

4. 尾部实现

作业

四、工程化中常用的通信方式

---

1. props父子组件消息传递

2. pubsub-js

1. 概念：PubSub消息订阅与发布

2. 安装

yarn add pubsub-js

3. 使用

① 引入

import PubSub from ‘pubsub-js’

② 发布消息

PubSub.publish('addTodo', todo);