《React起手式》

React介绍：用来构建用户界面的js库

React特点：

高性能：虚拟DOM(Virtual DOM)配合 diff 算法，最大限度地减少与 DOM 的交互。

声明式：React采用声明式编码UI，可以轻松实现交互式UI，让代码更加可行且方便调试。

组件化：通过 React 构建组件，使得代码更加容易得到复用，能够高效率的应用在大项目的开发中。

单向响应的数据流：React 中的数据是单向自顶向下传递的，父组件数据的更新会自动传递到子组件，但子组件的数据更新不会影响到父组件，也不能在子组件修改父组件传入的数据

JSX扩展：JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但官网建议使用它。

灵活：React可以与已知的库或框架很好的进行配合。

如何引入React

1. 使用cdn的方式，分别引入react库和react-dom，同时需要引入babel.js来配合text/babel编译jsx，这种方式并不推荐，效率低，你的浏览器并不认识jsx语法，所以需要babel来解析你的jsx转义成js语法，你的浏览器再进行编译
2. 使用webpack
   import...from...
   npm i react react-dom
   import React from 'react'
   import ReactDOM from 'react-dom'
   
3. 使用react脚手架
   用来快速帮助开发者搭建一个react项目 npx create-react-app one 创建一个名字为one的项目
   注意：项目名称不能包含大写字母;不要写中文;项目所在的目录不允许出现中文以及特殊字符。

使用react搭建一个基本的页面结构

<div id='root'></div>  //指定容器
const root = ReactDOM.createRoot(document.queryselector('#root')) //创建容器
root.render(<div>element</div>)  //渲染页面

注意事项

1. 可以使用class，id，标签名来创建容器
2. 同一个页面中可以挂载多个React容器
3. 同一个容器可以render多次，但最后一次会覆盖前面的内容
4. 同一个DOM元素不可被多次指定为容器
5. 不建议将body或者html根元素作为容器，会覆盖掉里面的内容