JSX
优点:
JSX执行更快,编译为jasvascript速度更快,进行了优化 类型更安全,编译过程如果出错就不能编译,及时发现错误 JSX编写模板更加简单快捷 注意:
JSX必须要有唯一的根节点 正常的html元素要小写,大写默认为组件 JSX表达式{}
由html元素构成 中间如果需要插入变量使用{} {}可以使用表达式 {}中间表达式中可以使用JSX元素 属性和html内容一样都是用{}来插入内容
JSX表达式
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
const root = document. getElementById ( 'root' )
const element = (
< div>
< h1> helloword< / h1>
< h1> { 1 + 1 } < / h1>
< / div>
)
ReactDOM. render (
element,
root
) ;
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
const root = document. getElementById ( 'root' )
const num = 1
const element = (
< div>
< h1> { num === 2 ? '2' : '不是2' } < / h1>
< / div>
)
ReactDOM. render (
element,
root
) ;
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
const root = document. getElementById ( 'root' )
const num = 1
const color = 'bgc'
const element = (
< div className= { color} >
< h1> { num === 2 ? '2' : '不是2' } < / h1>
< / div>
)
ReactDOM. render (
element,
root
) ;