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>