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

demo-02:JSX语法例子

  • 源码:demo02/ source
  • 核心代码
    <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中常用,对一个数组进行遍历处理,将其展示在页面

总结:

  • 多敲、多记、多查(面向谷歌编程)
  • 原创不易,希望可以帮助到可爱的你,喜欢的话请对我素质三连吧,☛点赞、✌关注、评论✍
    『React-Demos』Demo-02:JSX语法例子讲解_第1张图片

你可能感兴趣的:(React)