目录

1.1createElement()的问题

1.2JSX简介

1.3使用步骤

小结

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的声明式特点