React 学习笔记 day 4

React脚手架

理解

1. xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目：包含了所有需要的配置（语法检查、jsx编译、devServer...）；下载了所有相关的依赖；可以直接运行一个简单效果
2. react提供了一个用于创建react项目的脚手架库：create-react-app
3. 项目整体技术架构为：react+webpack+es6+eslint
4. 使用脚手架开发的项目特点：模块化、组件化、工程化

创建项目并启动

1. 全局安装：npm install -g create-react-app
2. 切换至创建项目的文件夹，使用命令：create-react-app hello-react
3. 进入项目文件夹：cd hello-react
4. 启动项目：npm start

成功界面如下如所示：

 React脚手架项目结构

 功能界面的组件化编码流程

1. 拆分组件：拆分界面，抽取组件
2. 实现静态组件：使用组件实现静态页面效果
3. 实现动态组件：动态显示初始化数据（数据类型、数据名称、保存的组件位置）；交互（从绑定事件监听开始）

TodoList练习案例

相关知识点

1. 动态初始化列表：如何确定将数据放在哪个组件的state中？某个组件使用：放在其自身的state中；某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）。
2. 关于父子之间通信：【父组件】给【子组件】传递数据→通过props传递；【子组件】给【父组件】传递数据→通过props传递，要求父组件提前给子组件传递一个函数。