<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JSX的注意</title> <script src="script/react.development.js"></script> <script src="script/react-dom.development.js"></script> <!-- 引入babel --> <script src="script/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> /* * JSX的注意事项 * 1. JSX不是字符串，不要加引号 * 2. JSX中html标签应该小写，React组件应该大写开头 * 3. JSX中有且只有一个根标签 * 4. JSX的标签必须正确结束（自结束标签必须写/） * 5. 在JSX中可以使用{}嵌入表达式 * - 有值的语句的就是表达式 * 6. 如果表达式是空值、布尔值、undefined，将不会显示 * 7. 在JSX中，属性可以直接在标签中设置 * 注意： * class需要使用className代替 * style中必须使用对象设置 * style={{background:'red'}} * * */ function fn() { return 'hello'; } const name = '孙悟空'; const div = <div id="box" onClick={() => { alert('哈哈') }} className="box1" style={{backgroundColor: "yellowgreen", border: '10px red solid'}} > 我是一个div <ul> <li>列表项</li> </ul> <input type="text"/> <div> {name} <br/> {1 + 1} <br/> {fn()} <br/> {NaN} <br/> </div> </div>; // alert(div); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(div); </script> </body> </html>
