@@ -7,12 +7,12 @@ React 是 facebook 开源的一套框架,可总结为以下几个特点:
77
88# JSX 语法
99一种特殊的 js 语法糖,可以在代码中把 html 标签当对象使用,其可以总结成以下几个特点:
10- - 不加任何引号
10+ ### 不加任何引号
1111以前在 js 中使用 html 标签都是加上引号当成字符串使用,而在 jsx 语法中不用加引号,直接当对象使用
1212``` javascript
1313 var html = < h1> React< / h1> ;
1414```
15- - 标签一定要有对应的结束标标签或结束标识:
15+ ### 标签一定要有对应的结束标标签或结束标识:
1616有时候我们在写 html 结构的时候,都没有把对应的结束标识加上,但浏览器能正常解析,但在 jsx 语法当中,则要强制写标准的 html 结构
1717这一段 html 标签在浏览器是能正常解析
1818``` html
@@ -27,7 +27,7 @@ jsx 正确写法应该是这样的
2727 var html = < input type= " text" value= " React" / > ;
2828 var div = < div> React< / div> ;
2929```
30- - 只能有一个根节点
30+ ### 只能有一个根节点
3131在 jsx 语法当中,最顶层的结构一定只有一个节点,不能出现兄弟节点
3232``` javascript
3333 var html =
@@ -36,7 +36,7 @@ jsx 正确写法应该是这样的
3636 < h1> Lucy< / h2>
3737 < / div>
3838```
39- - 不能在标签当中加注释
39+ ### 不能在标签当中加注释
4040在 jsx 语法当中,html 标签是一个对象,是一种数据结构,而不是真实的 dom 节点,也不是字符串,所以在标签当中不能添加注释。
4141下面的代码是在标签当中添加了注释,所以会报错。
4242``` javascript
@@ -47,7 +47,7 @@ jsx 正确写法应该是这样的
4747 < h1> Lucy< / h2>
4848 < / div>
4949```
50- - jsx 语法允许 html 标签和 javascript 代码混写
50+ ### jsx 语法允许 html 标签和 javascript 代码混写
5151在 jsx 语法当中,要在 html 标签中用到 js 代码,则用花括号({expression})括起来。
5252``` javascript
5353 var name = " DK" ;
@@ -60,7 +60,7 @@ jsx 正确写法应该是这样的
6060```
6161
6262# React 使用
63- - React 是一个第三方的框架库,所以在使用前要先把相关的库文件引入。
63+ ### React 是一个第三方的框架库,所以在使用前要先把相关的库文件引入。
6464``` html
6565 <!-- React 核心库-->
6666 <script src =" ../../../../libs/react/react.js" ></script >
@@ -69,11 +69,11 @@ jsx 正确写法应该是这样的
6969 <!-- babel 库,将 JSX 语法转为 JavaScript 语法-->
7070 <script src =" ../../../../libs/react/browser.min.js" ></script >
7171```
72- - React 是基于 jsx 语法去实现,所以需要明确 script 的类型为 text/babel
72+ ### React 是基于 jsx 语法去实现,所以需要明确 script 的类型为 text/babel
7373``` html
7474 <script type =" text/bebal" ></script >
7575```
76- - 使用 React 的核心对象和方法` ReactDOM.render ` 进行将 html 标签渲染到指定的容器
76+ ### 使用 React 的核心对象和方法` ReactDOM.render ` 进行将 html 标签渲染到指定的容器
7777``` html
7878 <body >
7979 <div id =" div1" ></div >
0 commit comments