应用 acreate-react-app 创立 react 利用
- 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. 应用脚手架开发的我的项目的特点: 模块化, 组件化, 工程化
- 创立我的项目并启动
第一步，全局装置：npm i -g create-react-app
第二步，切换到想创我的项目的目录，应用命令：create-react-app hello-react
第三步，进入我的项目文件夹：cd hello-react
第四步，启动我的项目：npm start
- 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 库的反对)
- 性能界面的组件化编码流程（通用）
- 拆分组件: 拆分界面, 抽取组件
- 实现动态组件: 应用组件实现动态页面成果
- 实现动静组件
3.1 动态显示初始化数据
3.1.1 数据类型
3.1.2 数据名称
3.1.2 保留在哪个组件?
3.2 交互 (从绑定事件监听开始)
组件的组合应用 -TodoList
性能: 组件化实现此性能
- 显示所有 todo 列表
- 输出文本, 点击按钮显示到列表的首位, 并革除输出的文本。
关键词：前端培训