『React-Demos』Demo-02：JSX语法例子讲解

本文链接：https://blog.youkuaiyun.com/q761830908/article/details/103965978

本文通过实例展示了JSX语法在React中的应用，包括如何使用JSX创建虚拟DOM，数组映射展示列表，以及React组件的基本结构。强调了JSX语法的便利性和React框架在前端开发中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    demo-02:JSX语法例子 
核心代码<body>
  <div id="example"></div>
  <div>-----------------------------分割线--------------------------</div>
  <h2>《杂诗》陶渊明</h2>
  <div id="example1"></div>
  <div>-----------------------------分割线--------------------------</div>
  <h2>前端学习框架</h2>
  <div id="example2"></div>

  <script type="text/babel">
    ReactDOM.render(
      <div>
        <h1>react学习</h1>
        <h2>欢迎学习 React</h2>
        <p>这是一个很不错的 JavaScript 库!</p>
      </div>
      , document.getElementById('example'))
  </script>

  <script type="text/babel">
    const names = ['盛年不重来', '一日难再晨', '及时当勉励', '岁月不待人']
    // 使用JSX语法创建虚拟DOM对象
    const newNames =
      names.map((item, index) => {
        return <li key={index}>{item}</li>
      })
    // 在JSX语法中，遇到数组会自动展开
    ReactDOM.render(<ul>{newNames}</ul>, document.getElementById('example1'))
  </script>

  <script type="text/babel">
    // 上面可以简写成如下写法
    const names = ['JQuery', 'Bootstrap', 'Node', 'Express', 'React', 'Vue']
    ReactDOM.render(<ul>
      {
        // 调用map方法，得到返回值，返回值是一个新数组，接着展开新数组
        names.map((item, index) => {
          return <li key={index}>{item}</li>;
        })
      }
    </ul>, document.getElementById('example2'))
    // 细节：这里的return可以直接去掉，但是不可以用｛｝把li标签包裹
    //  map这种方法以后会在react中常用，对一个数组进行遍历处理，将其展示在页面
  </script>

</body>
 
小结： 
  在example中我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它
在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
在JSX语法中，遇到数组会自动展开
map这种方法以后会在react中常用，对一个数组进行遍历处理，将其展示在页面
 
 
 
总结： 
多敲、多记、多查（面向谷歌编程）
原创不易，希望可以帮助到可爱的你，喜欢的话请对我素质三连吧，☛点赞、✌关注、评论✍
 

                