技术文章 | jishuwenzhang

爱创课堂reactJS培训笔记之JSX语法和编译

JSX语法


解决创建一个虚拟dom成本过大的问题

Jsx语法就是让我们用书写html中元素标签的方式来定义一个虚拟dom,在html中怎么书写元素,我们就怎么书写虚

拟dom元素

Html中定义 id是app的div: <div id=”app”></div>

在jsx语法中我们定义一个div:<div id=”app”></div>

但是js不支持这个语法,所以我们需要一些编译的插件或者是用工程化工具编译

工程化工具,我们用babel2插件解析

对于React的jsx语法,我们为了语义化文件,所以我们通常将文件拓展名定义成jsx
 
1 var Uls = React.createClass({
2 render: function () {
3 // 返回虚拟dom树
4 return (
5 <ul>
6 <li>女装 / 男装 / 内衣</li>
7 <li>鞋靴 / 箱包 / 配件</li>
8 <li>童装玩具 / 孕产 / 用品</li>
9 </ul>
10 )
11 }
12 })
 

Jsx编译


Jsx文件写在html中的编译

书写jsx语法跟书写html相似,但是有两个属性特殊,

一个class属性,我们要写成className

一个for属性,我们要写成htmlFor
 
1 <div className="inp-group">
2 <label htmlFor="my-input">姓名</label>
3 <input id="my-input" type="text" />
4 </div>
 
 
本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

https://www.icketang.com/