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

react demo2 (JSX入门)

2017-05-06 11:42 344 查看
react dome 2

JSX入门

需求:渲染一行标题,显示“Hello, world!”

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react dome</title>
<script src="./build/react.js"></script>
<script src="./build/react-dom.js"></script>
<script src="./build/browser.min.js"></script>

</head>

<body>

<div id="container"></div>

<script type="text/babel">

// 需求:JSX入门
// 渲染一行标题,显示“Hello, world!”

//1.JSX必须借助react环境运行

/*
2.JSX标签其实就是html标签,只不过我们在javascript中书写这些标签的时候,不用使用“”括起来,可以像xml一样书写
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('container')
);

*/

/*
3.转换:JSX语法能够让我们更加直观的看到dom结构,不能直接在浏览器上运行,最终会转换成javascript代码
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var child3 = React.createElement('li', null, 'Third Text Content');
var root = React.createElement('ul', { className: 'my-list' }, [child1, child2, child3]);
ReactDOM.render(
root,
document.getElementById('container')
);
*/

/*
4.在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
var text = "啊哈哈";
ReactDOM.render(
<h1>{text}</h1>,
document.getElementById('container')
);

*/

</script>

</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  react