jsx基本语法

最新推荐文章于 2024-06-29 15:48:07 发布

Leon_Jinhai_Sun

最新推荐文章于 2024-06-29 15:48:07 发布

阅读量198

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/103451170

版权

JSX

JSX 全称 JavaScript XML ，是一种扩展的 JavaScript 语言，它允许 HTML 语言直接写在 JavaScript 语言中，不加任何引号，这就是 JSX 语法。它允许 HTML 与 JavaScript 的混写。

环境配置

非模块化环境
- babel-standalone
- 执行时编译，速度比较慢
- 只适用于开发测试环境
模块化环境
- 结合 webpack 配置 babel 响应的工具完成预编译
- 浏览器执行的是预编译结果
Babel REPL 赋值查看编译结果
- 使用在线测试

基本语法规则

必须只能有一个根节点
多标签写到包到一个小括号中，防止 JavaScript 自动分号不往后执行的问题。

遇到 HTML 标签（以 < 开头）就用 HTML 规则解析
- 单标签不能省略结束标签。
遇到代码块（以 { 开头），就用 JavaScript 规则解析
JSX 允许直接在模板中插入一个 JavaScript 变量
- 如果这个变量是一个数组，则会展开这个数组的所有成员添加到模板中
单标签必须结束 />

基本语法：

const element = <h1>Hello, world!</h1>;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jsx语法</title>
</head>
<body>
  <div id="app"></div>
  <script src="node_modules/@babel/standalone/babel.js"></script>
  <script src="node_modules/react/umd/react.development.js"></script>
  <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
  <script type="text/babel">
    // const element = <h1>Hello, react!</h1>

    // 换行或者多标签，推荐加 ()
    // const element = (
    //   <div>
    //     <h1>hello react</h1>
    //     <p>aaa</p>
    //   </div>
    // )

    // function getTitle () {
    //   // JavaScript 语法，return 就不往后执行了
    //   return (
    //     <div>
    //       <h1>hello</h1>
    //       <p>haha</p>
    //     </div>
    //   )
    // }

    // const element = getTitle()

    
    ReactDOM.render(
      element,
      document.getElementById('app')
    )
  </script>
</body>
</html>