React核心原理
当数据发生变化时，UI 能够自动把变化反映出来。
在 React 之前，我们需要调用 DOM 的 API 来修改 DOM 树的结构，从而改变 UI 的展现。而在有了 React 之后，我们只需要在业务状态和 UI 状态之间建立一个绑定的关系就行了。绑定完成后，我们就不需要再关心怎么去精细控制 UI 的变化，因为 React 会在数据发生变化时，帮助我们完成 UI 的变化。
React的基本概念
组件
在 React 中，所有的 UI 都是通过组件去描述和组织的。
- 内置组件：映射到 HTML 节点的组件，例如 div、input、table 等，都是小写字母。
- 自定义组件：自己创建的组件，使用时必须以大写字母开头，例如 TopicList、TopicDetail。
React 组件是以树状结构组织到一起的，一个 React 的应用通常只有一个根组件。
我们要根据实际的场景把复杂的 UI 模块化为独立的组件。
React 组件的本质
React 组件的模型其实很直观，就是从 Model 到 View 的映射，这里的 Model 对应到 React 中就是 state 和 props。如下图所示：
数据绑定：当 Model 中的状态发生变化时，UI 会自动变化.
我们可以把 UI 的展现看成一个函数的执行过程。其中，Model 是输入参数，函数的执行结果是 DOM 树，也就是 View。而 React 要保证的，就是每当 Model 发生变化时，函数会重新执行，并且生成新的 DOM 树，然后 React 再把新的 DOM 树以最优的方式更新到浏览器。
状态 - 使用 state 和 props 管理状态
- state：保存组件的内部状态
- props：父子组件之间传递状态
JSX - React中的模版语言 - 语法糖
不用 JSX 的写法，其实也是能够写 React 的。
使用脚手架工具创建 React 应用
在实际的项目开发中，我们其实不仅需要把 React 作为 UI 层，还可能需要路由管理、状态管理等框架。与此同时，我们还需要使用最新的 JavaScript 语言特性、CSS 的预处理框架等等。所以一般需要结合 Webpack 等打包工具来使用 React。
Facebook 官方提供的 create-react-app 命令行工具
用来创建一个基础的 React 项目。它会提供一个完善的 Webpack 配置，让我们能够立刻开始使用React、JavaScript 语言的最新特性和 CSS Module 等主流的技术方案。但是它不包含 Redux 或者 Router 等非必须的功能。需要注意的是：create-react-app 的使用需要 Node.js 的环境，具体版本是 Node >= 10.16 版本以及 npm >=5.6 版本。
npx create-react-app my-app
cd my-app
npm start
思考
React 最打动你的特性是什么？或者说你认为它的最大优点有哪些？
