【資料圖】

前言

我是歌謠 我有個兄弟 巔峰的時候排名c站總榜19 叫前端小歌謠 曾經(jīng)我花了三年的時間創(chuàng)作了他 現(xiàn)在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷 微信公眾號前端小歌謠

總結(jié)

/** JSX的注意事項* 1. JSX不是字符串，不要加引號* 2. JSX中html標簽應(yīng)該小寫，React組件應(yīng)該大寫開頭* 3. JSX中有且只有一個根標簽* 4. JSX的標簽必須正確結(jié)束（自結(jié)束標簽必須寫/）* 5. 在JSX中可以使用{}嵌入表達式* - 有值的語句的就是表達式* 6. 如果表達式是空值、布爾值、undefined，將不會顯示* 7. 在JSX中，屬性可以直接在標簽中設(shè)置* 注意：* class需要使用className代替* style中必須使用對象設(shè)置* 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標簽應(yīng)該小寫，React組件應(yīng)該大寫開頭    *       3. JSX中有且只有一個根標簽    *       4. JSX的標簽必須正確結(jié)束（自結(jié)束標簽必須寫/）    *       5. 在JSX中可以使用{}嵌入表達式    *              - 有值的語句的就是表達式    *       6. 如果表達式是空值、布爾值、undefined，將不會顯示    *       7. 在JSX中，屬性可以直接在標簽中設(shè)置    *           注意：    *               class需要使用className代替    *               style中必須使用對象設(shè)置    *                   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>