1、定义
react是用于构建用户界面的 JavaScript 库，react主要用于构建UI，官方定义 react是 mvc中的 v（视图），但是由于和vue中的mvvm很相似，于是也有许多开发者认为react是mvvm模式。
2、构建
react的使用和vue一样，大致有两种方式，一是直接引入相关的js文件进行使用，二是使用react的脚手架（可使用官方的，也可以用自己搭建的）。
我就为大家讲一讲最简单的，script标签引入react相关js文件直接使用的方式。
首先，引入以下三个js文件，它们分别是react的核心库、提供与DOM相关功能的操作的文件、处理浏览器兼容问题的文件。
//react的核心库
<script src="https://cdn.staticfile.org/react/16.8.6/umd/react.development.js"></script>
//提供与DOM相关的功能
<scriptsrc="https://cdn.staticfile.org/react-dom/16.8.6/umd/react-dom.development.js"></script>
//ES6转ES5,处理浏览器兼容问题
<scriptsrc="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
其次，创建一个div标签，给上id为root，后面需要将组建挂载在此id的DOM节点上。
然后，创建一个script文件，type=“text/babel”,目的是实现html/xml和js一起使用。
最后，利用ReactDOM.render做页面渲染。效果如下：
一个基本的react示例
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.8.6/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.8.6/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<div>
<h1>Hello, world flowers!</h1>
</div>
,
document.getElementById('root')
);
</script>
</body>
</html>
|
说明：
1）ReactDOM.render方法用于将我们的组件挂载到DOM节点上，它接收两个参数，第一个是要挂载的内容，第二个是要挂载到的地方。
2）对于要挂载的内容，不能直接多个标签并列，最外层一定要有一个标签将它们包裹起来。
3）html/xml+js混写的写法叫JSX，如果要在script标签里写jsx的话，需要在script上加一个type属性为“text/babel”。