JSX（ JavaScript XML）简介及语法规则_jsx语法

作者：weixin_40725706 | 2024-04-27 02:52:03

踩

jsx语法

JSX（ JavaScript XML）简介及语法规则

1、JSX简介
2、JSX的作用
3、jsx语法规则
4、babel.js的作用
5、jsx的练习

1、JSX简介

全称: JavaScript XML，是一个JavaScript的语法扩展。

2、JSX的作用

用来简化创建虚拟DOM

写法：var ele = <h1>Hello JSX!</h1>

注意：
1、它不是字符串, 也不是HTML/XML标签
2、它最终产生的就是一个JS对象

3、jsx语法规则

定义虚拟DOM时，不要写引号。
标签中混入JS表达式时，要用{ }<span>{myData}</span>
样式的类名指定不要用class，要用className(避开es6中的class类)。className="title"
内联样式要用{{style:value}}的形式，在css中带有-的属性，取消-转换为小驼峰。style={{color: "red", fontSize: "30px"}}
虚拟DOM只有一个根标签
标签必须闭合
标签首字符
（1）若小写字母开头，则将该标签转为html中同名元素，躲在html中无该标签的同名元素，则报错；
（2）若大写字母开头，react就去渲染对应的组件，多组件没有定义，则报错。
标签中的注释要写在 {} 中；
当变量是 Number、String 类型时，可以直接显示；
当变量是 Number、String 类型时，可以直接显示；
对象类型不能作为子元素（not valid as a React child）
数组会自动展开；

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        .title {
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
<div id="test"></div>


<!--此处引入的文件有一定的顺序-->
<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>
<!--注意这里写的是type="text/babel"，且一定要写babel-->
<script type="text/babel">
  const myId = "myTest";
    const myData = 'hello REACT'
    //1、创建虚拟DOM
    const VDOM = (
       <div>
           <h1 className="title" id={myId}>
               <span style={{color: "red", fontSize: "30px"}}>{myData}</span>
           </h1>
           <h1 className="title" id={myId.toUpperCase()}>
                <span style={{color: "red", fontSize: "30px"}}>{myData}</span>
           </h1>
           <input type="text"/>
       </div>
    );//此处一定不要写引号，因为不是字符串，是jsx
    //2、渲染虚拟DOM
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

运行结果：
在这里插入图片描述

4、babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

5、jsx的练习

注意：1、js表达式和js语句的区别；2、只能循环数组；3、循环绑定key，key需要唯一（绑定下标有一定的问题，后面会逐步学习解决）

<body>
<div id="test"></div>

<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
    /*一定注意区分：【js语句（代码）】与【js表达式】
    * 【js表达式】：一个表达式会产生一个值，可以放在任何一个需要值的地方
    *       下面这些都是表达式：
    *           1、a
    *           2、a+b
    *           3、demo(1)
    *           4、arr.map()
    *           5、function test(){}
    * 【js语句（代码）】：
    *       下面这些都是语句（代码）：
    *           1、if(){}
    *           2、for(){}
    *           3、switch(){case:xxxxx}
    * */
    //模拟一些数据
    const data = ['Angular', 'React', 'Vue'];
    //1、创建虚拟DOM
    const VDOM = (
        <div>
            <h1>前端js框架列表</h1>
            <ul>
                {data.map((item,index) => {
                    return <li key={index}>{item}</li>
                })}
            </ul>
        </div>
    );//此处一定不要写引号，因为不是字符串，是jsx
    //2、渲染虚拟DOM
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/494405