Components

创建项目

创建项目box-app：

create-react-app box-app
cd box-app
npm start

安装bootstrap库：

npm i bootstrap
bootstrap 的引入方式：

import 'bootstrap/dist/css/bootstrap.css';

创建 Component

创建按钮

当子节点数量大于 1 时，可以用<div>或<React.Fragment>将其括起来。

内嵌表达式

JSX 中使用{}嵌入表达式。

设置属性

• class -> className
• CSS 属性：background-color -> backgroundColor，其它属性类似

数据驱动改变 Style

渲染列表

• 使用 map 函数
• 每个元素需要具有唯一的key属性，用来帮助 React 快速找到被修改的 DOM 元素。

Conditional Rendering

利用逻辑表达式的短路原则。

• 与表达式中 expr1 && expr2，当expr1为假时返回expr1的值，否则返回expr2的值
• 或表达式中 expr1 || expr2，当expr1为真时返回expr1的值，否则返回expr2的值

绑定事件

注意妥善处理好绑定事件函数的this

修改 state

需要使用this.setState()函数 每次调用this.setState()函数后，会重新调用this.render()函数，用来修改虚拟 DOM 树。React 只会修改不同步的实际 DOM 树节点。

给事件函数添加参数

<button onClick={() => this.xxx(args)}</button>