文件引入
- react.js必须在
react-dome.js
中引入,因为react.js
为react的核心文件
- browser.js可以随便引入
script类型设置
- 使用react后编写的包含DOM的js文件其实是
JSX
,所以在script中必须声明type为text/babel
,有browser来进行解析
JSX中的DOM
元素编写的注意事项
- 不能使用
class
,因为class
为JSX
中的关键字,应该改写成为className
- 在lable元素中不能使用
for
这个属性,因为在JSX
中for
也是关键字,应该改写成htmlFor
- 在ReactDOM.render()中的第一个参数中需要创建的
DOM
必须是一个DOM
, 也就是说有且仅有一个父级元素
- 单标签必须要闭合
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../src/browser.js"></script>
<script src="../src/react.js"></script>
<script src="../src/react-dom.js"></script>
<div id="reactCont"></div>
<script type="text/babel">
let oDiv = document.getElementById('reactCont')
ReactDOM.render(
<div>
<lable htmlFor="userName">姓名</lable>
<br/>
<input id="userName" type="text"/>
</div>
,oDiv)
</script>
</body>
</html>