当前学习版本地址https://github.com/facebook/react/releases?after=16.0.0-beta.5
下载图中红圈位置文件，
1. demo
<!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="./source/react.js"></script>
<script src="./source/react-dom.js"></script>
<script>
ReactDOM.render(
React.DOM.h1(null,"hello world!"),
document.getElementById("app")
)
</script>
</html>
在你选择的DOM节点中渲染了一个React组件。渲染过程从一个顶层组件开始，而顶层组件可以按需包含许多子元素（子元素中还可以嵌套子元素）。实际上，景观这是一个简单的例子，但H1组件中任然包含一个子元素，即文本hellowrold。
2. React.DOM
从浏览器控制台中打印React.DOM对象的完成属性列表，如下图：
React.DOM和ReactDOM的区别
React.DOM是预定好的HTML元素集合，而ReactDOM是在浏览器中渲染应用的一种途径。
h1()方法的首个参数接收一个对象，用于指定该组件的任何属性：
React.DOM.h1({id:'my-heading',className:'title',data-id:'dataid'},"hello world")
image.png
调用React.DOM生成的代码
ReactDOM.render(React.DOM.h1({ id: 'my-heading', className: 'title' },
React.DOM.span(
null, React.DOM.em(null, 'Hello ')
),
' World'),
document.getElementById("app")
);
JSX版本
ReactDOM.render(
React.DOM.h1(
<h1 id="my-heading" class="title"><em>hello</em>world</h1>,
document.getElementById("app")
);
3. 特殊DOM属性
style、className
ReactDOM.render(React.DOM.h1({ id: 'my-heading', className: 'title' },
React.DOM.span(
null, React.DOM.em({
style: {
background:"red",
color:'white',
fontFamily:'Verdana'
}
}, 'Hello')
),
' World!'),
document.getElementById("app")
);
其中font-family被fontFamily取代，其他命名类似。
网友评论