使用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.创建项目并启动
第一步,全局安装:npmi-gcreate-react-app
第二步,切换到想创项目的目录,使用命令:create-react-apphello-react
第三步,进入项目文件夹:cdhello-react
第四步,启动项目:npmstart
3.react脚手架项目结构
public----静态资源文件夹
favicon.icon------网站页签图标
index.html--------主页面
logo.png-------logo图
logo.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.输入文本,点击按钮显示到列表的首位,并清除输入的文本