好客租房10-jsx的基本使用

1.1createElement()的问题

1繁琐不简洁

2不直观 无法一眼看出所描述的结构

3不优雅 用户体验不爽

    React.createElement("div",
     
    {classsName:"shopping-list"},
     
    React.createElement("h1",null,"shopping List")
     
    React.createElement(
     
    "ul",null,React.createElement("li",null,"Instagram"),
     
    React.createElement("li",null,"whatsApp")
     
    )
     
    )

    <div className="shopping-list">
     
    <h1>shopping List</h1>
     
    <ul>
     
    <li>Instagram</li>
     
                     <li>whatsApp</li>
     
    </ul>
     
    </div>

1.2JSX简介

jsx是javascript XML的简写，表示在javaScript代码中xml（HTML）格式的代码

优势:声明式语法更加直观 和HTML结构相同 降低了学习成本 提升开发效率
1.3使用步骤

    //第一步创建jsx创建react元素
    const title = <h1>hello Geyao</h1>
     
    //第二步渲染React元素
    ReactDOM.render(title,document.getElementById("root"))

小结

1推荐使用jsx语法创建React元素

2写jsx就写HTML一样 更加直观 友好

3jsx语法更能提现React的声明式特点