zoukankan      html  css  js  c++  java
  • 初识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>
    
  • 相关阅读:
    Matlab之rand(), randn(), randi()函数的使用方法
    matlab给图片插入说明文字
    matlab之find()函数
    excel根据数据源变化的动态图表
    高斯坐标
    (转)Mysql技术内幕InnoDB存储引擎-表&索引算法和锁
    (转)MySQL 插入数据时,中文乱码问题的解决
    (转)防止人为误操作MySQL数据库技巧一例
    (转)mysql explain详解
    (转)一个MySQL 5.7 分区表性能下降的案例分析
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12829911.html
Copyright © 2011-2022 走看看