第三章：react 应用( 基于 react )

第三章：react 应用( 基于 react ）

3.1. 使用 create-react-app 创建 react 应用

3.1.1. react 脚手架

1. xxx 脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目

a. 包含了所有需要的配置

b. 指定好了所有的依赖

c. 可以直接安装/编译/运行一个简单效果

2. react 提供了一个用于创建 react 项目的脚手架库: create-react-app

3. 项目的整体技术架构为: react + webpack + es6 + eslint

4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

3.1.2. 创建项目并启动

npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start

3.1.3. react 脚手架项目结构

ReactNews
|--node_modules---第三方依赖模块文件夹
|--public
|-- index.html----------------- 主页面
|--scripts
|-- build.js-------------------build 打包引用配置
|-- start.js-------------------start 运行引用配置
|--src------------源码文件夹
|--components-----------------react 组件
|--index.js------------------- 应用入口 js
|--.gitignore------git 版本管制忽略的配置
|--package.json----应用包配置文件
|--README.md-------应用描述说明的 readme 文件

3.2. demo: 评论管理

3.2.1. 效果

3.2.2. 拆分组件

应用组件: App

• state: comments/array
  添加评论组件: CommentAdd
• state: username/string, content/string
• props: add/func
  评论列表组件: CommentList
• props: comment/object, delete/func, index/number
  评论项组件: CommentItem
• props: comments/array, delete/func

3.2.3. 实现静态组件

3.2.4. 实现动态组件

动态展示初始化数据

• 初始化状态数据
• 传递属性数据响应用户操作, 更新组件界面
• 绑定事件监听, 并处理
  . 实现动态组件

动态展示初始化数据

• 初始化状态数据
• 传递属性数据响应用户操作, 更新组件界面
• 绑定事件监听, 并处理
• 更新 state