react 官方推薦使用 一種JSX語(yǔ)法,類似xml
react.js 引入的時(shí)候放在react-dom.js的前面引入
引入jsx.js的時(shí)候,一定要指定 type="babel" 才能識(shí)別混寫的jsx.js 文件
<script src="jsx.js" type="text/babel"></script>
基礎(chǔ)語(yǔ)法
我們先在index.html的文件里面寫一個(gè)div,
<div class="box"></div>
其他的操作都在jsx.js的文件里面
瀏覽頁(yè)面的時(shí)候,要切換到服務(wù)器模式
常量用法
const a = <h1>Hello react!!</h1>;
ReactDOM.render(
<div>{ a }</div>,
document.querySelector(".box")
)
以上,ReactDOM.render(html,target[,callback])將內(nèi)容渲染到指定的節(jié)點(diǎn)
就是把常量 a 渲染到 box這個(gè)類名的容器里面,(記得div的后面要加一個(gè)逗號(hào).)
變量用法 內(nèi)部解析
let msg = "Hello React!!!";
let ;
定義一個(gè)常量b
const b = <a href={ href }>{ msg }</a>
ReactDOM.render( <div>{ b }</div>, document.querySelector(".box") )
頁(yè)面就會(huì)顯示一個(gè)可以跳轉(zhuǎn)到百度的一個(gè) a 標(biāo)簽
記憶點(diǎn):
1 { } 就代表進(jìn)入javascript 的執(zhí)行環(huán)境
不用jsx語(yǔ)法,用react 提供的語(yǔ)法怎么寫
const c = React.createElement("a",{href:"http://www.baidu.com"},"復(fù)雜超鏈接")
ReactDOM.render(
<div>{ c }</div>,
document.querySelector(".box")
)
這是不使用jsx的語(yǔ)法,使用react創(chuàng)建一個(gè)元素的語(yǔ)法(寫法)
這是創(chuàng)建了一個(gè)a 標(biāo)簽,創(chuàng)建了一個(gè)href 屬性,
還有其他react方法,稍微簡(jiǎn)單點(diǎn)的
const d = React.DOM.a({href:"http://www.baidu.com"},"復(fù)雜超鏈接2")
ReactDOM.render(
<div>{ d }</div>,
document.querySelector(".box")
)
嵌套的寫法
const e = <div>
<h1>嵌套</h1>
<span>span嵌套</span>
<input type="text" />
</div>
ReactDOM.render(
<div>{ e }</div>,
document.querySelector(".box")
)
用createElement怎么寫
把子作為第三個(gè)參數(shù)創(chuàng)建進(jìn)來(lái) 比e的方法要難一些,
const f = React.createElement("div",null,
React.createElement("h1",null,"嵌套2")
);
ReactDOM.render(
<div>{ f }</div>,
document.querySelector(".box")
)
使用react.js不一定要使用jsx語(yǔ)法
可以使用javascript 原生語(yǔ)法,使用與不使用在嵌套的時(shí)候,就表現(xiàn)得很明顯了,不使用jsx ,代碼很多,一直在createElement,但是使用了的話,就直接使用標(biāo)簽就可以了
jsx真正的語(yǔ)法
1 必須要有結(jié)束的斜杠結(jié)束符 <input type="text" />
2 注意, style 要用兩個(gè)花括號(hào),外面的花括號(hào)說(shuō)明進(jìn)入javascript 環(huán)境,里面的花括號(hào)說(shuō)明 對(duì)象,不等同于vue的表達(dá)式
樣式的設(shè)置,表達(dá)式語(yǔ)法
const g = <span style={{color:"red",fontSize:"30px"}}>style寫法</span>
ReactDOM.render(
<div>{ g }</div>,
document.querySelector(".box")
)
換一種寫法,style 就可以用一個(gè)花括號(hào)寫
const so = {
color:"blue",
fontSize:"20px",
border:"1px solid pink",
background :"#ccc"
}
const h = <span style={ so }>style 寫法2</span>
ReactDOM.render(
<div>{ h }</div>,
document.querySelector(".box")
)
這樣寫,樣式加的比較多,但是也是分開三部分的,so 是樣式部分,const h 是標(biāo)簽部分,ReactDOM.render()是渲染頁(yè)面部分
關(guān)鍵字沖突
我們?cè)趇ndex.html里面寫一點(diǎn)樣式
<style>
.cn{
color:red;
font-size: 40px;
}
</style>
//在jsx.js里面寫
const i = <span className="cn">class 寫法</span>
1 直接象在寫頁(yè)面樣式的時(shí)候class="cn"
是不可以的,要寫成className
2 對(duì)于一些關(guān)鍵字要進(jìn)行轉(zhuǎn)換, class 要寫成 className, label 標(biāo)簽的for屬性 要寫成 htmlFor
const ii = <div>
<label htmlFor="male">nan</label>
<input type="radio" id="male" name="sex"/>
<label htmlFor="ff">nv</label>
<input type="radio" id="ff" name="sex"/>
</div>
ReactDOM.render(
<div>{ ii }</div>,
document.querySelector(".box")
)
如果用for 就會(huì)報(bào)上面的錯(cuò)誤
改成htmlFor 就不會(huì)報(bào)錯(cuò)了
label 標(biāo)簽是應(yīng)用于 選擇的
跟標(biāo)簽及煩人的注釋寫法
ReactDOM.render(
<div>
{/*這是一段注釋 jsx 的注釋必須用{}包裹,只能有一個(gè)根節(jié)點(diǎn)*/}
{ ii }
{ a }
{ b }
{ c }
{ d }
{ e }
{ f }
{ g }
{ h }
{ ii }
{ i }
{ j }
{ k }
{ l }
</div>,
document.querySelector(".box")
)
數(shù)組的使用
const j = [
<h1 key="1">數(shù)組一</h1>,
<h1 key="2">數(shù)組二</h1>,
<h1 key="3">數(shù)組三</h1>
]
ReactDOM.render(
<div>
{ j }
</div>
)
document.querySelector(".box")
一個(gè)數(shù)組里面有三個(gè)元素,沒(méi)有key屬性的時(shí)候,會(huì)報(bào)錯(cuò)
const k = <div>
<hr/>
<h1>Hello</h1>
{ j }
</div>;
ReactDOM.render(
<div>
{ k }
</div>
)
document.querySelector(".box")
j 是一個(gè)數(shù)組,用{ } 放在那里都可以
如果數(shù)組里面直接是一堆標(biāo)簽,那么就會(huì)直接渲染到另一個(gè)父標(biāo)簽里面,可以渲染到跟div 里面,也可以渲染到 k 的父元素div 里面
數(shù)組
const l =["數(shù)組四","數(shù)組5","數(shù)組6"];
ReactDOM.render(
<div>
{ l }
</div>
)
document.querySelector(".box")
如果沒(méi)有標(biāo)簽包裹,就會(huì)直接渲染到頁(yè)面中,沒(méi)有標(biāo)簽包裹
我們可以這樣寫
使用map函數(shù)遍歷數(shù)組
ReactDOM.render(
<div>
{
l.map((m,index)=>{
return <h1 key={ index }>{ m }</h1>
})
}
</div>
)
document.querySelector(".box")
