一、为什么脚手架中可以使用JSX语法？

• JSX 不是标准的ECMAScript语法，它是ECMAScript的扩展
• 需要babel编译之后才能使用
• 编译JSX语法的包为：@babel/preset-react

二、JSX的基本使用

1、注意点

• React 元素的属性名使用驼峰命名法
• 特殊属性名：class -> className 、 for -> htmlFor 、tabindex -> tabIndex
• 使用小括号包裹JSX，从而避免JS中的自动插入

const dv = (
	<div>
  	nihao
  </div>
)

2、嵌入JS表达式

1、基本用法

• 数据存储在JS中
• 语法：{javaScript表达式}

const name = "Jack"
const dv = (
            <div>你好，我叫{name}</div>
           )

2、注意点

• JSX自身也是表达式
• 不能在{}中出现语句(比如：if/for等 )

const h1 = <h1>我是JSX</h1>
const dv = (
			<div>你好，我叫{h1}</div>
)

3、条件渲染

/**
	条件渲染
*/
const isLoading = true
const loadData = ()=>{
  if(isLoading) {
    return <div>loading...</div>
  }
  return <div>数据加载完成</div>
}

const title =(
	<h1>
  	条件渲染：
    {loadData()}
  </h1>
)

ReactDOM.render(title,document.getElementById('root'))

4、列表渲染

const songs = [
  {id:1,name:'痴心绝对'},
  {id:2,name:"像我这样的人"},
  {id:3,name:'南山南'}
]

const list = (
	<ul>
    {songs.map(item=><li key={item.id}>{item.name}</li>)}
  </ul>
)