-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHelloReact.html
More file actions
56 lines (41 loc) · 1.35 KB
/
Copy pathHelloReact.html
File metadata and controls
56 lines (41 loc) · 1.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello React</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 引入一个react 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom.用于支持react 操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入一个babel，用于 将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script><!-- React DOM -->
<!-- 此处一定要写babel -->
<script type="text/babel">
// 创建组件
class Person extends React.Component{
// state={name:'wfc',age:18,sex:'boy'}
render(){
console.log(this)
const {name,age,sex}=this.props
return (
<ul>
<li>姓名:{name}</li>
<li>姓名:{age}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
//渲染组件
ReactDOM.render(<Person name='汪方晨' age='30' sex='boy'/>,document.getElementById('test1'))
ReactDOM.render(<Person name='老牛' age='31' sex='girl'/>,document.getElementById('test2'))
ReactDOM.render(<Person name='老汪' age='18' sex='boy'/>,document.getElementById('test3'))
</script>
</body>
</html>