1. 介绍描述
react 是用于构建用户界面的JavaScript库,由Facebook开源;
特点: 声明式,组件化,支持客户端与服务器渲染,高效,单向数据流;
react高效的原因:虚拟DOM,不直接操作DOM; DOM diff算法,最小化页面重绘
2. 相关js库
react.js: React 的核心库
react-dom.js: 提供操作 DOM 的 react 扩展库
babel.min.js: 解析 JSX 语法代码转为纯 JS 语法代码的库
3. hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type='text/babel'>
// 创建虚拟dom
class Element extends React.Component{
constructor(){
// 继承父级的所有参数
super(...arguments)
}
// 页面渲染内容
render(){
return(
<div>
<h2>hello react</h2>
</div>
)
}
}
// 渲染虚拟dom到页面真实容器中
ReactDOM.render(
<Element/>, document.getElementById('app')
)
</script>
</html>