采用create-react-app建立react应用领域

1. react钢架
1.1. xxx钢架: 用以协助合作开发人员加速建立两个如前所述xxx库的模版工程项目
1.1.1. 包涵了大部份须要的实用性(句法检查和、jsx校对、devServer…)
1.1.2. 浏览好了大部份有关的倚赖
1.1.3. 能间接运转两个单纯效用
1.2. react提供更多了两个用作建立react工程项目的钢架库: create-react-app
1.3. 工程项目的总体控制技术构架为: react + webpack + es6 + eslint
1.4. 采用钢架合作开发的工程项目的特征: 模组化, 模块化, 产业化
2. 建立工程项目并开启
第一步,全局安装:npm i -g create-react-app
第二步,切换到想创工程项目的目录,采用命令:create-react-app hello-react
第三步,进入工程项目文件夹:cd hello-react
第四步,开启工程项目:npm start
3. react钢架工程项目结构
public —- 静态资源文件夹
favicon.icon —— 网站页签图标
index.html ——– 主页面
logo192.png ——- logo图
logo512.png ——- logo图
manifest.json —– 应用领域加壳的实用性文件
robots.txt ——– 爬虫协议文件
src —- 源码文件夹
App.css ——– App模块的样式
App.js ——— App模块
App.test.js —- 用作给App做测试
index.css —— 样式
index.js ——- 入口文件
logo.svg ——- logo图
reportWebVitals.js
— 页面性能分析文件(须要web-vitals库的支持)
setupTests.js
—- 模块单元测试的文件(须要jest-dom库的支持)
4. 功能界面的模块化编码流程(通用)
1. 拆分模块: 拆分界面,抽取模块
2. 实现静态模块: 采用模块实现静态页面效用
3. 实现动态模块
3.1 动态显示初始化数据
3.1.1 数据类型
3.1.2 数据名称
3.1.2 保存在哪个模块?
3.2 交互(从绑定事件监听开始)
模块的组合采用-TodoList
功能: 模块化实现此功能
1. 显示大部份todo列表
2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本