React 之 jsx

1)全称:javascript xml

2)react定义的一种类似xml的js扩展语法:js + xml

3)本质是React.createElement(component,props,...children)方法的语法糖

4)作用:用来简化创建虚拟dom

    a. 写法: var ele = <h1>hello jsx </h1>

    b. 注意1: 它不是字符串,也不是html/xml标签

    c. 注意2: 他最终产生的就是一个js对象

5)标签名任意:HTML标签或其他标签

 

jsx语法规则:

 1.定义虚拟dom时,不要写引号

 2.标签中混入js表达式要用{}

 3.样式的类名指定不要用class,要用className

 4.内联样式,要用style={{ key:value}}的形式去写  value若不是变量就要给字符串

 5.虚拟dom只有一个根标签

 6.标签必须闭合

 7.标签首字母

　　(1)若小写字母开头,则将该标签转为html标签,若html中无该标签对应的同名元素,则报错

       (2)若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错

 

练习案例

<!-- 此处有一个容器 -->
  <div id="test"></div>
  <script src="js/react.development.js"></script>
  <script src="js/react-dom.development.js"></script>
  <script src="js/babel.min.js"></script>
  <script type="text/babel"> /* 一定要写babel */
    const data=['张三','李四','王五']
     const VDom  = (
     <ul>
        {
          data.map(item=>{
            return <li key={item}>{item}</li>
          })
        }
      </ul>
     )
     ReactDOM.render(VDom,document.getElementById('test'))
  </script>

 

 

 

扩展:

 xml 早期用于存储和传输数据

 但是随着发展,逐渐被json所取代

 

注意:

一定注意区分 [js语句] 与 [js表达式]

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

   下面这些都是表达式

    a,  a+b  ,  arr.map()    ,function test() {} 返回的就是函数体

2.语句(代码):

    下面这些都是语句(代码)

       (1)if(){}

      (2)for(){}

       (3)switch(){case:}

 

常见错误;

object are not valid as a react child

解答:在react 中不能直接给对象,可以给数组