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”。