初识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>

[其他] 初识JSX

相关帖子

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

常用JavaScript的注释方法示例

怎么在JavaScript中加注释

php使用GD库创建图片缩略图的方法

利用html+js触发弹窗事件

javascript如何改变背景

使用原生querySelectorAll和forEach来实现点击切换

笔记本要一直充电好还是不充电好？

react如何引入css

江南才子 LV4