当前位置：网站首页>1-2 JSX syntax rules

1-2 JSX syntax rules

2022-04-23 16:59:00 【Endless cake】

JSX Rule of grammar

  1. Define the virtual DOM When , Be sure not to use quotation marks .
  2. In the label Js When you use grammar {}.
  3. The class name of the style must be className
  4. The inline style should use {key:value} Write in a format
  5. fictitious DOM There must be only one root tag
  6. Label must be closed
  7. Label initials
    （1） If it starts with a lowercase letter , Then change the label to A fellow html The elements in , if html There is no such label in the , False report .
    （2） If it starts with a capital letter ,React Just render the corresponding components , If the component is not defined , False report .

Here's the exercise code ：

<!DOCTYPE html>
<html>
  <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>react</title>
    <style>
      .title {
        background-color: orange;
        width: 200px;
      }
    </style>
  </head>

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

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!--  load  Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      // Create virtual DOM
      const myId = "aguigu";
      const myDate = "HeLLO WORLD";
      const VDOM = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
            <span style={
   { color: "white", fontSize: "29px" }}>
              {myDate.toLowerCase()}
            </span>
          </h2>
          <input type="text" />
          </div>

      );
      // Rendering virtual DOM To page 
      ReactDOM.render(VDOM, document.getElementById("text"));
    </script>
  </body>
</html>

版权声明
本文为[Endless cake]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230554519876.html

边栏推荐

猜你喜欢

随机推荐