【React】React学习笔记04_jsx练习

注意区分：【js语句(代码)】和【js表达式】

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

      下面这些都是表达式：
      (1)a
      (2)a+b
      (3)demo(1)
      (4)arr.map()
      (5)function name(params) {}

2.语句（代码）：

      下面这些都是语句（代码）：
        (1)if(){}
        (2)for(){}
        (3)switch(){case:xxx}

源码

<script type="text/babel" > /* 此处一定要写babel , 真实开发不用这样的方式*/
// 模拟一些数据
const data = ['a','b','c']

//1.创建虚拟DOM
const VDOMJSX = (
  /*此处一定不要写引号！！！！，因为不是字符串 */
  /* toLocaleLowerCase 全部转成小写 */
    <div>
      <h1 className="title" id={'title'}>
        {'数据加工测试'}
      </h1>  
      <ul>
      {
        // 需要有key值才能展示，这里key填index只为展示用，实际需要其他值，因为使用index作为key会出现问题这里不展开。
        data.map((item,index)=>{
          return <li key={index}>{item}</li>
        })
      }
      </ul>
    </div>
  ) 
// 2.渲染虚拟DOM到页面 (虚拟DOM,容器)
ReactDOM.render(VDOMJSX,document.getElementById('jsxtest'))

/*
  一定注意区分：【js语句(代码)】和【js表达式】
    1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
      下面这些都是表达式：
      (1)a
      (2)a+b
      (3)demo(1)
      (4)arr.map()
      (5)function name(params) {}
    2.语句（代码）：
      下面这些都是语句（代码）：
        (1)if(){}
        (2)for(){}
        (3)switch(){case:xxx}
*/

```