【资料图】

前言

我是歌谣 我有个兄弟 巅峰的时候排名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"}}** */

代码案例

            <script src="script/react.development.js"></script>    <script src="script/react-dom.development.js"></script>        <script src="script/babel.min.js"></script>
<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 = 
 {            alert("哈哈")        }} className="box1"        style={{backgroundColor: "yellowgreen", border: "10px red solid"}}    >        我是一个div        
            
列表项
        
                
            {name} 
            {1 + 1} 
            {fn()} 
            {NaN} 
        
    
;    // alert(div);    const root = ReactDOM.createRoot(document.getElementById("root"));    root.render(div);</script>