01-react基础-jsx

定义：

jsx是js创建虚拟DOM的语法糖

语法：

1. 定义虚拟DOM时，不要写引号
2. 标签中混入js语法表达式时要用{}
3. 样式的类名指定不要用class，要使用className
4. 内联样式，要使用style={{key:value}}的形式
5. 虚拟DOM只能有一个根标签
6. 标签必须闭合
7. 小写开头渲染为html中同同名元素标签，没有则报错；大写渲染为组件，若组件没有定义，则报错

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

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

下面这些都是表达式：

(1). a

(2). a+b

(3). demo(1)

(4). arr.map()

(5). function test () {}

2.语句(代码)：

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

(1).if(){}

(2).for(){}

(3).switch(){case:xxxx}

下面是jsx语法demo

//模拟一些数据
const data = ['Angular','React','Vue']
//1.创建虚拟DOM
const VDOM = (
        <div>
                <h1>前端js框架列表</h1>
                <ul>
                        {
                                data.map((item,index)=>{
                                        return <li key={index}>{item}</li>
                                })
                        }
                </ul>
        </div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test')