React学习第3天——JSX语法规则

JSX全称：Javascript XML

是React定义的一种类似于XML的JS扩展语法

jsx语法规则：
      1.定义虚拟DOM时，不要写引号。
      2.标签中混入JS表达式时要用{}。
      3.样式的类名指定不要用class，要用className。
      4.内联样式，要用style={{key:value}}的形式去写。
      5.只有一个根标签
      6.标签必须闭合
      7.标签首字母
            (1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
            (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel" >
        const myId = 'aTgUiGu'
        const myData = 'HeLlo,rEaCt'

        //1.创建虚拟DOM
        const VDOM = (
            <div>
                <h2 className="title" id={myId.toLowerCase()}>
                    <span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
                </h2>
                <h2 className="title" id={myId.toUpperCase()}>
                    <span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
                </h2>
                <input type="text"/>
            </div>
        )
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))

        /* 
                jsx语法规则：
                        1.定义虚拟DOM时，不要写引号。
                        2.标签中混入JS表达式时要用{}。
                        3.样式的类名指定不要用class，要用className。
                        4.内联样式，要用style={{key:value}}的形式去写。
                        5.只有一个根标签
                        6.标签必须闭合
                        7.标签首字母
                                (1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
                                (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

         */
    </script>
</body>
</html>

 



一定注意区分：【js语句(代码)】与【js表达式】
      1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
               下面这些都是表达式：
                     (1). a
                     (2). a+b
                     (3). demo(1)
                     (4). arr.map() 
                     (5). function test () {}
      2.语句(代码)：
               下面这些都是语句(代码)：
                     (1).if(){}
                     (2).for(){}
                     (3).switch(){case:xxxx}


 




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jsx小练习</title>
 6 </head>
 7 <body>
 8     <!-- 准备好一个“容器” -->
 9     <div id="test"></div>
10     
11     <!-- 引入react核心库 -->
12     <script type="text/javascript" src="../js/react.development.js"></script>
13     <!-- 引入react-dom，用于支持react操作DOM -->
14     <script type="text/javascript" src="../js/react-dom.development.js"></script>
15     <!-- 引入babel，用于将jsx转为js -->
16     <script type="text/javascript" src="../js/babel.min.js"></script>
17 
18     <script type="text/babel" >
19         /* 
20             一定注意区分：【js语句(代码)】与【js表达式】
21                     1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
22                                 下面这些都是表达式：
23                                         (1). a
24                                         (2). a+b
25                                         (3). demo(1)
26                                         (4). arr.map() 
27                                         (5). function test () {}
28                     2.语句(代码)：
29                                 下面这些都是语句(代码)：
30                                         (1).if(){}
31                                         (2).for(){}
32                                         (3).switch(){case:xxxx}
33         
34      */
35         //模拟一些数据
36         const data = ['Angular','React','Vue']
37         //1.创建虚拟DOM
38         const VDOM = (
39             <div>
40                 <h1>前端js框架列表</h1>
41                 <ul>
42                     {
43                         data.map((item,index)=>{
44                             return <li key={index}>{item}</li>
45                         })
46                     }
47                 </ul>
48             </div>
49         )
50         //2.渲染虚拟DOM到页面
51         ReactDOM.render(VDOM,document.getElementById('test'))
52     </script>
53 </body>
54 </html>






 








            

            
posted @ 
2022-02-11 16:59 
JO斯大 
阅读(100) 
评论(0) 
 
收藏 
举报