JSX基本使用

Babel会把JSX转译成一个名为React.createElement()函数调用

原生创建recat元素：

1

const span = React.createElement('span', null, 'span')

用JSX创建react元素：

1

const ul = <div><ul><li><span>hello worde!!!</span></li></ul></div>

JSX中使用JS表达式：

语法：{JavaScript表达式}

注：语法中是单大括号，不是双大括号

1
2
3
4

const name = 'kl'
 const div = (
   <div>XXX:{name}</div>
 )

使用jsx注意事项：自身也是js表达式

​ 1.添加类名需小驼峰命名法：第一个单词首字母小写，从第二个单词及以后的首字母是大写开头

​ 2.声明的jsx元素需圆括号下只能有一个根元素

3.不能在{}中出现语句和对象（if/for,{a:555}等）

数据类型支持：

单大括号：值、变量、函数调用、三元运算符、数组（基本类型，jsx）