react的基本語(yǔ)法有哪些？基本語(yǔ)法講解！

在我們之前的前端學(xué)習(xí)中相信大家應(yīng)該掌握了不少相關(guān)的技術(shù)，今天我們就來說說有關(guān)于：“react的基本語(yǔ)法有哪些？”這個(gè)問題吧！下面是小編收集的一些相關(guān)的內(nèi)容希望對(duì)大家的學(xué)習(xí)和了解有所幫助！

引入：

我們都知道在react的官方推薦是用的是一種?JSX?語(yǔ)法與我們之前接觸過的?xml?類似，而且當(dāng)我們?cè)谑褂靡?react.js?的時(shí)候需要在?react-dom.js?的前面引入，而且在引入jsx.js的時(shí)候一定要指定?type=“babel”?才能識(shí)別混寫的jsx.js文件，如下代碼所示：

<script src="jsx.js" type="text/babel"></script>

我們?cè)陧?xiàng)目中的?index.html?中的文件里面寫個(gè)div，代碼：?<div clsss="box"></div>?,其他的相關(guān)操作都是在jsx.js的文件中進(jìn)行使用的，而且在瀏覽頁(yè)面的時(shí)候要進(jìn)行切換到我們的服務(wù)器模式。

我們先來看個(gè)代碼,如下所示：

const a = <h1>Hello react!!</h1>;
ReactDOM.render(
  <div>{ a }</div>,
document.querySelector(".box")
)

我們?cè)诖a中可以看到，?ReactDOM.render(html,target[,callback])?將內(nèi)容渲染到指定的節(jié)點(diǎn)，就是吧常量? a ?渲染到我們的?box?這個(gè)類名的容器里面，我們?cè)趯懙臅r(shí)候還需要注意在div之后需要加一個(gè)逗號(hào)。

我們看看我們的這串代碼：?let msg = "Hello React!!!"; let href = "http://www.baidu.com"; ?定義一個(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)境 。

先來看一部分的代碼，如下所示：

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?屬性。

我們可以來看看下面這個(gè)方法，我們這邊就通過代碼來進(jìn)行了解就可以了，代碼如下：

const d = React.DOM.a({href:"http://www.baidu.com"},"復(fù)雜超鏈接2")
ReactDOM.render(
  <div>{ d }</div>,
document.querySelector(".box")
)

可以看到我們通過?React.DOM.a({href:"http://www.baidu.com"},"復(fù)雜超鏈接2")?這個(gè)方法來實(shí)現(xiàn)創(chuàng)造?a?標(biāo)簽和?href?的屬性。

對(duì)于嵌套寫法的方法，我們也是通過什么的案例來進(jìn)行修改，下面是相關(guān)的代碼：

const e = <div>
  <h1>嵌套</h1>
  <span>span嵌套</span>
  <input type="text" />
 </div>
ReactDOM.render(
  <div>{ e }</div>,
document.querySelector(".box")
)

代碼如下所示：

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ǔ)法，我們通過對(duì)比就知道使用和不使用嵌套的表現(xiàn)就很明顯我們通過使用嵌套的代碼相對(duì)于沒有使用的代碼會(huì)比較少。下面是一張有關(guān)于jsx語(yǔ)法的相關(guān)內(nèi)容大家可以作為參考：

從截圖中我們知道必須要有結(jié)束的斜杠結(jié)束符 ?<input type="text" /> ?； 而且還需要注意 ?style ?要用兩個(gè)花括號(hào),外面的花括號(hào)說明進(jìn)入?javascript ?環(huán)境,里面的花括號(hào)說明 對(duì)象,不等同于?vue?的表達(dá)式。

const g = <span style={{color:"red",fontSize:"30px"}}>style寫法</span>
ReactDOM.render(
  <div>{ g }</div>,
document.querySelector(".box")
)

我們通過將代碼中的style換成另一個(gè)寫法，代碼如下：

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

我們之所以這樣寫的原因是因?yàn)闃邮郊拥谋容^多，但是有分開來幾部分的，而且在代碼中的 ?so? 是屬于樣式部分的、?cunst h?則是屬于標(biāo)簽部分的，那么對(duì)于?ReactDOM.render（）?來說則是渲染部分的。

我們?cè)陧?xiàng)目中的index.html中寫上我們的樣式，代碼如下所示：

<style>
.cn{
        color:red;
        font-size: 40px;
    }
</style>
//在jsx.js里面寫
const i = <span className="cn">class 寫法</span>

在代碼里我們通過直接在將樣式中的類屬性命名為?class=“cn”?是不允許的，在這里需要借用?className?才可以，對(duì)于一些關(guān)鍵字的話是需要進(jìn)行轉(zhuǎn)換的，例如： ?class ?要寫成 ?className?, ?label ?標(biāo)簽的?for?屬性 要寫成? htmlFor?，如果我們?cè)陂_發(fā)的時(shí)候使用的label的標(biāo)簽時(shí)屬性不是?htmlfor?的話是會(huì)報(bào)錯(cuò)的。所以我們需要進(jìn)行改正。

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

我們?nèi)绻诖a中，當(dāng)一個(gè)數(shù)組有三個(gè)元素時(shí)沒有?key?屬性的話運(yùn)行的時(shí)候是會(huì)出現(xiàn)錯(cuò)誤的。

要是我們像下面這個(gè)代碼的話，數(shù)組里面直接是一堆便簽?zāi)敲淳蜁?huì)直接渲染到另一個(gè)父標(biāo)簽里面，可以渲染到根div里面也可以渲染到我們的k的父元素的?div?中。代碼如下所示：

const l =["數(shù)組四","數(shù)組5","數(shù)組6"];

ReactDOM.render(
<div>
{ l }
</div>
)
document.querySelector(".box")

如果我們?cè)诖a中沒有標(biāo)簽包裹著的話就會(huì)直接渲染到頁(yè)面中。

在遍歷數(shù)組中我們可以按照下面這個(gè)代碼來作為參考：ReactDOM. render(

<div>
{
    l.map((m,index)=>{
    return <h1 key={ index }>{ m }</h1>
  })
}
</div>
)
document.querySelector(".box")

下面這是一張有關(guān)于react相關(guān)內(nèi)容的截圖，大家可以作為參考:

以上就是有關(guān)于“react的基本語(yǔ)法有哪些？”的相關(guān)內(nèi)容，希望對(duì)大家有所幫助，更多有關(guān)于react相關(guān)的內(nèi)容我們都可以在react 入門課程中進(jìn)行學(xué)習(xí)和了解，當(dāng)然如果你有更的理解也可以和大家一同分享探討。