React中的JSX

createElement()的问题
1、繁琐不简洁
2、不直观，无法一眼看出所描述的结构
3、不优雅，用户体验不爽

什么是JSX

jsx是JavaScript XML的简写，表示在JavaScript 代码中写XML(HTML)格式的代码
优势：声明式语法更加直观、与HTML结构相同，降低了学习成本 提升开发效率

// 2 创建react元素
// JSX 基本语法
const title = <h1>Hello JXS</h1>
// 3 渲染react元素
ReactDOM.render(title, document.getElementById(`root`))

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

1、JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展。
2、需要使用babel编译处理后，才能在浏览器环境中使用
3、脚手架已经默认有配置
4、编译JSX语法的包为：@babel/preset-react

注意点：
1、React元素的属性名使用驼峰命名法
2、特殊属性名：class=>className、for=>htmlFor、tabindex=>tabIndex
3、没有子节点的React元素可以用 />结束
4、推荐使用小括号包裹JSX，从而避免js中的自动插入分号陷进

JSX的条件渲染

const isLoadin = false
const loadDate = () => {
    // 条件渲染
    // if (isLoadin) {
    //     return (
    //         <div>loading...</div>
    //     )
    // }
    // return (
    //     <div>显示</div>
    // )

    // 三元表达式
    // return isLoadin ? (<div>loading...</div>) : (<div>显示</div>)

   	// 逻辑与运算符
    return isLoadin && (<div>loading...</div>)

}
// 2 创建react元素
const title = (
    <h1 className='title'>{loadDate()}</h1>
)
// 3 渲染react元素
ReactDOM.render(title, document.getElementById(`root`))

JSX的列表渲染
如果要渲染一组数据,应该使用数组的map()的方法
注意： 渲染列表时应该添加key属性，key属性的值要保证唯一

const songs = [
    { id: 1, name: '痴心绝对' },
    { id: 2, name: '痴心绝对' },
    { id: 3, name: '痴心绝对' }
]
// 2 创建react元素
const title = (
    <ul>
        {
            songs.map(item => {
                return (
                    <li key={item.id}>{item.name}</li>
                )
            })
        }
    </ul>
)

JSX的样式处理
1、行内样式（style）
2、类名（className）

// 引入css
import './style/index.css'
const songs = [
    { id: 1, name: '痴心绝对' },
    { id: 2, name: '痴心绝对' },
    { id: 3, name: '痴心绝对' }
]
// 2 创建react元素
const title = (
    <ul style={{ color: `red` }} className="title">
        {
            songs.map(item => {
                return (
                    <li key={item.id}>{item.name}</li>
                )
            })
        }
    </ul>
)