React

React起源于Facebook内部项目，一开始用于假设instageam,在2012年5月开源，它是一个用于构建用户界面的JavaScript库,React拥有较高的性能，代码逻辑简单，所以越来越多的人开始关注和使用它。

React特点:

1. 声明式设计：采用声明式设计，可以轻松描述应用。

2. 高效：React通过对DOM的模拟，最大限度的减少了与真实DOM的交互。

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

4. JSX：JSX是一种JavaScript扩展语法。

5. 组件：通过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页面：

1. 在页面中加入依赖

2. 在<script>中添加Type=text/babel使其支持JSX语法

3. 在HTML中准备一个容器，用于将我们用React创建的虚拟DOM添加进去

4. 创建一个虚拟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。