【React学习】—jsx语法规则（三）

news2024/11/26 0:34:48

【React学习】—jsx语法规则（三）

在这里插入图片描述
一、jsx语法规则：
1、定义虚拟DOM，不要写引号，
2、标签中混入JS表达式要用{}
3、样式的类名指定不要用class，要用className
4、内联样式，要用style={{key:value}}的形式去写
5、虚拟DOM只有一个根表签
6、标签必须闭合
7、标签首字母（若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素则报错）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用jsx创建</title>
    <style>
      .title {
        background-color: pink;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test">
<!-- 
           jsx语法规则：
           1、定义虚拟DOM，不要写引号，
           2、标签中混入JS表达式要用{}
           3、样式的类名指定不要用class，要用className
           4、内联样式，要用style={{key:value}}的形式去写
           5、虚拟DOM只有一个根表签
           6、标签必须闭合
           7、标签首字母（若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素则报错）
 -->

    </div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      const myId = "CaiCai";
      const myData = "Hello React";
      const VDOM = (
        <div>
          <h2 className="title" id={myId.toLowerCase()}>
            <span style={{color:'white', fontSize: "20px" }}>
            
              {myData.toLocaleUpperCase()}</span>
          </h2>
          <h2 className="title" id={myId.toLowerCase()}>
            <span style={{color:'white', fontSize: "20px" }}>
              {myData.toLocaleUpperCase()}
            </span>
          </h2>
          <input type="text"/>
        </div>);

      ReactDOM.render(VDOM, document.getElementById("test"));

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

二、区分js语句和表达式

在这里插入图片描述

三、JSX练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx练习</title>
  </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>
    <!-- 引入Bable 用于将jsx转化为js -->
    <script src="../js/babel.min.js"></script>

    <!-- 此处一定要写Bable -->
    <script type="text/babel">
        const data=['Angular','React','Vue']
      //创建虚拟DOM
      const VDOM =(
        <div>
        <h1>前端js框架列表</h1>
        <ul>
          {
            data.map((item,index)=>{
               return <li key={index}>{item}</li>
            })
          }
        </ul>
        </div>
      )
      //渲染虚拟DOM到页面
      ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
  </body>
</html>