react之 脚手架

脚手架的意义

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

脚手架的安装

第一步，全局安装：sudo npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步，进入项目文件夹：cd hello-react

第四步，启动项目：yarn start

VsCode中的 react 插件

ES7+ React/Redux/React-Native snippets

快捷键:

1. rcc: react 中的类式组件
2. rfc: react 中的函数式组建

ToDoList 小案例

1. 拆分组件, 实现静态组件, 注意: className 和 style 的写法
2. 动态初始化列表, 如何确定将数据放在那个组建的 state 中?
   1. 某个组件单独使用: 放在自身的 state 中
   2. 某些组件使用: 放在他们共同的父组件state 中(状态提升)
3. 关于父子组件之间的通信
   1. 父组件给子组件传递数据: 通过 props 直接传
   2. 子组件给父组件传: 父组件定义一个箭头函数, 通过 props 传给子组件, 子组件传参调用. 由于箭头函数内的 this 始终指向上下文, 参数在箭头函数内就可以传到父组件中.
4. 注意状态在哪里, 操作状态的方法就在哪里