您的位置：首页 > Web前端 > React

第一节,加载react native js文件的方法和渲染元素

2016-12-16 11:20 525 查看
<!doctype html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/react.js"></script>  
<script src="js/react-dom.js"></script> 
<!-- 原本的 react package 被拆分为 react 及 react-dom 两个 package。其中 react package 中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 这些 API，而 react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、
.findDOMNode。 -->

<script src="js/browser.min.js"></script>  <!-- 使浏览器支持babel，你可以使用ECMAscript2015编码(javascript下一代标准) .js、.jsx、.es和.es6 -->

</head>

<body>
<div id="example1"></div>
<script type="text/babel"> /*  jsx语法 等于 1.js里的js语法 */
ReactDOM.render(
<ul>
<li>First Text Content</li>
<li>Second Text Content</li>
<li id="test">Third Text Content</li>
</ul>,
document.getElementById('example1')
);
ReactDOM.render(
<h2>lesson one</h2>,
document.getElementById('test')
);
</script>
<!-- // <script src="jsx/1.js"></script>  -->

</body>
</html>

*******************************************

1.js的内容

var child1 = React.createElement('li', null, 'First Text Content');

var child2 = React.createElement('li', null, 'Second Text Content');

var child3 = React.createElement('li',{ id :'test' }, 'Third Text Content');

var root = React.createElement('ul', { className: 'my-list' }, child1, child2, child3);

ReactDOM.render(
root,
document.getElementById('example1')

);

ReactDOM.render(
React.createElement('h2',{name:'title'},'lesson one'),
document.getElementById('test')

);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航