江南才子 发表于 2021-8-6 11:43:51

初识JSX

React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
JSX优点

[*]JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
[*]它是类型安全的,在编译过程中就能发现错误。
[*]使用 JSX 编写模板更加简单快速。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      <div>
      <h1>{1+2}</h1>
      </div>
      ,
      document.getElementById('example')
      );
    </script>
</body>
</html>
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
var i = 1;
      ReactDOM.render(
      <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
      </div>
      ,
      document.getElementById('example')
      );
    </script>
</body>
</html>
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式。React 会在指定元素数字后自动添加 px 。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      <h1 style = {myStyle}>Hello</h1>,
      document.getElementById('example')
      );
    </script>
</body>
</html>
注释需要写在花括号中。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      <div>
            <h1>Hello</h1>
            {/*注释...*/}
         </div>,
      document.getElementById('example')
      );
    </script>
</body>
</html>


文档来源:51CTO技术博客https://blog.51cto.com/u_3513677/3285500
页: [1]
查看完整版本: 初识JSX