react基础用法
react引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../base/react.min.js"></script>
<script src="../base/react-dom.min.js"></script>
<script src="../base/browser.min.js"></script>
</head>
- <script src="../base/react.min.js"></script>
相当于vue.js 提供的是React对象- <script src="../base/react-dom.min.js"></script>
提供了ReactDOM 对象- <script src="../base/browser.min.js"></script>
帮助浏览器解析jsx语法糖
rn react-native
网页 B(browser)/S(server) webapp dom bom
react基本语法 + react-dom 可以写网页
app C(client)/s(Server) 手机硬件以及ui
react基本语法 +react-native 可以写app
react创建实例(15.6版本)
<body>
<div id="app">
</div>
<script type="text/babel">
let Component = React.createClass({
render() { // render函数内部 返回jsx
return ( // 用小括号表示返回的是jsx格式
<h1> Hello World</h1>
)
}
})
ReactDOM.render(<Component/>,document.getElementById('app'))
// 将组件的虚拟dom挂载到真实dom上
</script>
</body>
</html>
1. 15.6版本创建组件 React.createClass
2. 组件是虚拟dom
3. 将虚拟dom通过 ReactDOM.render(组件标签,要挂载的元素)
4. 组件名必须大写