前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
总结
/*
* JSX的注意事项
* 1. JSX不是字符串，不要加引号
* 2. JSX中html标签应该小写，React组件应该大写开头
* 3. JSX中有且只有一个根标签
* 4. JSX的标签必须正确结束（自结束标签必须写/）
* 5. 在JSX中可以使用{}嵌入表达式
* - 有值的语句的就是表达式
* 6. 如果表达式是空值、布尔值、undefined，将不会显示
* 7. 在JSX中，属性可以直接在标签中设置
* 注意：
* class需要使用className代替
* style中必须使用对象设置
* style={{background:'red'}}
*
* */
代码案例
<!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>
