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

简介: 好客租房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>
-----------------------------------
©著作权归作者所有:来自51CTO博客作者前端歌谣的原创作品,请联系作者获取转载授权,否则将追究法律责任
好客租房10-jsx的基本使用
https://blog.51cto.com/u_14476028/5290301

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"))

相关文章
|
XML 前端开发 JavaScript
好客租房10-jsx的基本使用
好客租房10-jsx的基本使用
76 0
好客租房142-react-virtualized2基本使用
好客租房142-react-virtualized2基本使用
105 0
好客租房142-react-virtualized2基本使用
|
前端开发 JavaScript
好客租房3-React的基本使用
好客租房3-React的基本使用
93 0
|
前端开发
好客租房4-react的基本使用 方法说明
好客租房4-react的基本使用 方法说明
85 0
|
JavaScript
好客租房11-为什么脚手架使用jsx语法
好客租房11-为什么脚手架使用jsx语法
82 0
|
前端开发 开发者
好客租房74-react组件进阶总结
好客租房74-react组件进阶总结
47 0
|
JavaScript 前端开发
好客租房89-react原理总结
好客租房89-react原理总结
62 0
好客租房141-react-virtualized1概述
好客租房141-react-virtualized1概述
76 0
好客租房141-react-virtualized1概述
好客租房12-JSX的注意点
好客租房12-JSX的注意点
46 0
|
资源调度 安全 前端开发
好客租房6-React脚手架的应用(细节)
好客租房6-React脚手架的应用(细节)
100 0