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

拎壳儿跑的蜗牛

已于 2022-10-13 16:43:42 修改

阅读量593

点赞数

分类专栏： React 文章标签： reactjs

于 2020-01-13 23:45:48 首次发布

本文链接：https://blog.csdn.net/q761830908/article/details/103965978

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    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中常用，对一个数组进行遍历处理，将其展示在页面
 
 
 
总结： 
多敲、多记、多查（面向谷歌编程）
原创不易，希望可以帮助到可爱的你，喜欢的话请对我素质三连吧，☛点赞、✌关注、评论✍
 

                

拎壳儿跑的蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
『React-Demos』Demo-02：JSX语法例子讲解

demo-02:JSX语法例子源码：demo02/ source核心代码<body> <div id="example"></div> <div>-----------------------------分割线--------------------------</div> <h2>《杂诗》陶渊明</h...
复制链接

扫一扫