React
React起源于Facebook内部项目，一开始用于假设instageam,在2012年5月开源，它是一个用于构建用户界面的JavaScript库,React拥有较高的性能，代码逻辑简单，所以越来越多的人开始关注和使用它。
React特点:
-
声明式设计：采用声明式设计，可以轻松描述应用。
-
高效：React通过对DOM的模拟，最大限度的减少了与真实DOM的交互。
-
灵活：React可以与已知的库或框架很好的配合。
-
JSX：JSX是一种JavaScript扩展语法。
-
组件：通过React构建组件，使得代码容易得到复用，能够更好的应用在大型项目中。
虚拟DOM
浏览器在初始化时会载入一个HTML文档，当页面内容需要改变时，JavaScript会根据用户操作来创建或者删除节点或者是插入新元素，这让JavaScrpit管理DOM变得非常复杂而效率又低，这意味着开发人员要认真的了解如何修改UI的细节来优化程序。从编码角度来看，先将特定的元素清空然后重新构建他们，比保留原有的元素然后研究怎么跟新他们更容易一些。React提出了虚拟DOM的概念，采用虚拟DOM之后，我们将不需要直接与DOM API直接交互，而是使用一组指令，让React和浏览器交互。虚拟DOM实际是javaScript对象，直接访问javaScript对象比直接与DOM交互效率高的多。
Hello React
使用React很简单，只需要在页面中引入React的依赖：
//ReactUI库，用来创建视图
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
//ReactDOM库，用于在浏览其中渲染UI
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
//支持JSX语法
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>现在然我们来创建第一个React页面：
-
在页面中加入依赖
-
在
<script>中添加Type=text/babel使其支持JSX语法 -
在HTML中准备一个容器，用于将我们用React创建的虚拟DOM添加进去
-
创建一个虚拟DOM，将虚拟DOM放入容器中
在HTML中创建一个容器:这个稍后我们将会将虚拟DOM装入div中
<div id="text"></div>在JavaScript中添加以下代码：
<script type="text/babel">
//JSX
const element = <h1>Hello,world!</h1>
ReactDOM.render(
element,
document.querySelector("#text")
);
</script>
于是我们便可以在网页中看到效果：
<h1>Hello,world!</h1>就是JSX语法，JSX具有JavaScript的全部功能，它用于创建一个虚拟的DOM元素，然后使用ReactDOM.render()将这些元素渲染为DOM。