React--2: jsx

1. jsx了解

• 全称：JavaScript XML
• react定义的是一种类似于 XML 的 JS 扩展语法 JS + XML
• 本质是 React.createElemet() 的一种语法糖

🚀 了解一下
XML 早期用于存储和传输数据（结构比数据多）

<Student>
		<name>Tom</name>
		<age>18</age>
</Student>

json

{
	"name":"Tom"
	"age":19
}

parse：用于 json 转为 js 的对象
stringfy：用于将 js 对象转为 json

2. jsx语法规则

• 定义虚拟DOM时，不要写引号
• 标签中使用变量，用 { }

const myId ="aBCd"
const VDOM = <h1>Hello React{myId}</h1>
ReactDOM.render(VDOM,document.getElementById('root'))
const TDOM = document.getElementById('root'); 

• 使用外部样式不要用class，用className

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const myId ="aBCd"
const VDOM = <h1 class="title"><span>Hello React{myId}</span></h1>
ReactDOM.render(VDOM,document.getElementById('root'))
const TDOM = document.getElementById('root'); 

index.css

.title{
  text-align: center;
  background-color: aqua;
}

虽然效果出来了，但是我们发现它抱错。报错什么意思呢？因为不能使用class，那用什么？用className

• 使用内联样式 要用style={{ }} 的形式去写。并且样式使用驼峰规则。

我们之前的写法

const VDOM = <h1 style="background:red">Hello React{myId}</h1>

那么，这么写是会抱错的。如下写法才是正确的。使用双花括号，最外层的花括号表示要在里面写 js 表达式了。里面的花括号表示写的是一个对象。

const VDOM = <h1 style={{background:"red",color:'white'}}>Hello React{myId}</h1>

如果想要写多个字母的属性，我们需要使用驼峰规则，如：fontSize。

const VDOM = 
<h1 style={{background:"red",color:'white',fontSize:'20px'}}>
	Hello React{myId}
</h1>

• 不能有多个根标签，必须只有一个根标签。
  
  所以需要在最外层包一层标签

const VDOM = (
    <div>
        <h1 style={{ background: "red", color: 'white', fontSize: '20px' }}>
            Hello React{myId}
        </h1>
        <h1>sdsds</h1>
    </div>

)

• 标签必须闭合

• 标签首字母

  • 若小写字母开头，则将该标签转为 html 的同名元素，若html无该标签对应的同名元素，则抱错。
  • 若大写字母开头，react就去渲染对应组件，如组件没定义，则报错。

3. jsx小练习

动态遍历列表渲染

// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const data = ["React","Vue","Angular"]
const VDOM = (
    <div>
        <h1>
            前端框架列表
        </h1>
        <ul>
            {data.map((item,index)=>{
                return( <li>{item}</li>)
               
            })}
        </ul>
    </div>

)
ReactDOM.render(VDOM, document.getElementById('root'))
const TDOM = document.getElementById('root');

上面的报错：说明没有唯一的key，因为是遍历出来的，我们需要加上唯一的key。

return( <li key={index}>{item}</li>)

题外话：

【 js表达式 】与【 js 语句(代码) 】

1. 表达式：一个表达式会产生一个值，可以放在任何需要的地方。
   下面这些都是表达式：

• a
• a+b
• demo(1)
• arr.map()
• function test() { }

2. 语句（代码）

• if(){ }
• for(){ }
• switch(){ case:xxx }