React:React JSX

m0_74141224

397人浏览 · 2025-08-21 14:09:53

m0_74141224 · 2025-08-21 14:09:53 发布

JSX:全称JavaScript XML

a.react 定义的一种类似于XML的JS扩展语法【JS + XML】

XML：早期用于存储和传输数据【现在用JSON传输】


<student>
    <name>Tom</name>
    <age>19</age>
</student>

JSON：【JSON.parse JSON.toStringify】

{
   "name":"张三",
    "age":18
}

JSX语法规则:

jsx语法规则:

1.定义虚拟DOM是，不要写引号

2.标签中国混入JS表达式要用{}

3.样式的类名指定不要用class,要用className

4.内联样式，要用style={{key:value}}的形式去写

5.虚拟DOM必须只有一个根标签

6.标签必须闭合

7.标签首字母:

(1)若小写字母开头，则将该标签转成html中同名元素,若html中无该标签，则报错

(2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      background-color: orange;
      width: 200px;
    }
  </style>
</head>

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

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">

    const myId = 'atguigu'
    const myData = 'hello,react!'
    const VDOM = (
      //只能有一个根标签
      //写的是jsx的标签，会被转化成html
      <div>
        <h2 className="title" id={myId} >
          <span style={{ color: 'white', fontSize: '28px' }}>{myData}</span>
        </h2>
        <input type="text" />
      </div>
    )

    //渲染虚拟DOM
    ReactDOM.render(VDOM, document.getElementById('test'))

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


  </script>
</body>

</html>

JSX案例:

{}:用来放置js表达式

一定注意区分:【js语句(代码)】与【js表达式】

1.表达式:会产生一个值

例:a

a + b

demo(1)

arr.map()

function test(){}

2.语句(代码):

下面这些嗾使语句(代码)"

if(){}

for()

switch(){}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="test"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    /*
      一定注意区分:【js语句(代码)】 与 【js表达式】
      1.表达式:会产生一个值
        例:a
          a + b
          demo(1)
          arr.map()
          function test(){}

        2.语句(代码):
        下面这些嗾使语句(代码)"
          if(){}
          for()
          switch(){}
    */
    const list = ['Angular', 'Vue', 'React']
    const VDOM = (
      <div>
        <h1>前端js框架列表</h1>
        <ul>
          {
            list.map((item, index) => {
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    )
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>

</html>