reactBaseDemo/react-2.html at master · linxing1026/reactBaseDemo · GitHub

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react-jsx</title>
</head>
<style type="text/css"></style>
<body>
	<div id="app"></div>
</body>
</html>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
<!-- <script type="text/babel" src="./js/hello.js"> -->
<script type="text/babel">

	// ReactDOM.render(
	//     <h1>Hello world!</h1>,
	// 	document.getElementById('app')
	// )

	// 嵌套多个标签 需要使用一个div包裹
	// ReactDOM.render(
	// 	<div>
	// 		<h1>Vue.js</h1>
	// 		<h2>React.js</h2>
	// 	</div>,
	// 	document.getElementById('app')
	// )

	// 引入外部文件

	//javascript表达式  JSX中使用的js表达式写在{}中
	// ReactDOM.render(
	// 	<h1>{1+1}</h1>,
	// 	document.getElementById('app')
	// )

	//JSX中不能使用if else语句，但是可以使用三元运算符
	var i = 1;
	ReactDOM.render(
		<div>
			<h1>{i==1?'True':'false'}</h1>
		</div>,
		document.getElementById('app')
	)

	//React推荐使用内联样式 ，可以使用camelCase来设置 React在制定的元素后面会自动添加px
	// var myStyle = {
	// 	fontSize: 50,
	// 	color: '#e73480'
	// };
	// ReactDOM.render(
	// 	<h1 style={myStyle}>Hello React</h1>,
	// 	document.getElementById('app')
	// );

	// JSX允许插入数组，数组会自动展开所有成员
	// var arr = [
	// 	<h3 key='1'>vue</h3>,
	// 	<h3 key='2'>angular</h3>,
	// 	<h3 key='3'>react</h3>,
	// ];
	// ReactDOM.render(
	// 	<div>{arr}</div>,
	// 	document.getElementById('app')
	// );
</script>