react demo2 (JSX入门)

来源：互联网发布：收据打印软件自定义编辑：程序博客网时间：2024/05/20 16:37

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>

0 0