react的基本語法有哪些？基本語法講解！

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

引入：

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

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

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

我們先來看個代碼,如下所示：

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

我們在代碼中可以看到，?ReactDOM.render(html,target[,callback])?將內(nèi)容渲染到指定的節(jié)點，就是吧常量? a ?渲染到我們的?box?這個類名的容器里面，我們在寫的時候還需要注意在div之后需要加一個逗號。

我們看看我們的這串代碼：?let msg = "Hello React!!!"; let href = "http://www.baidu.com"; ?定義一個常量?b ?在通過這串代碼：?const b = <a href={ href }>{ msg }</a> ReactDOM.render( <div>{ b }</div>, document.querySelector(".box") ) ?通過代碼我們的頁面就會顯示一個可以跳轉(zhuǎn)到百度的一個 ?a? 標簽 記憶點: 1 { } 就代表進入javascript 的執(zhí)行環(huán)境 。

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

const c = React.createElement("a",{href:"http://www.baidu.com"},"復(fù)雜超鏈接")

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

在代碼中我們通過不使用?jsx?語法，使用?react?來創(chuàng)建一個元素的語法，而且創(chuàng)建了一個?a?標簽，還創(chuàng)建了個?href?屬性。

我們可以來看看下面這個方法，我們這邊就通過代碼來進行了解就可以了，代碼如下：

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")?這個方法來實現(xiàn)創(chuàng)造?a?標簽和?href?的屬性。

對于嵌套寫法的方法，我們也是通過什么的案例來進行修改，下面是相關(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的語法，我們還可以使用JavaScript原生語法，我們通過對比就知道使用和不使用嵌套的表現(xiàn)就很明顯我們通過使用嵌套的代碼相對于沒有使用的代碼會比較少。下面是一張有關(guān)于jsx語法的相關(guān)內(nèi)容大家可以作為參考：

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

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

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

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? 是屬于樣式部分的、?cunst h?則是屬于標簽部分的，那么對于?ReactDOM.render（）?來說則是渲染部分的。

我們在項目中的index.html中寫上我們的樣式，代碼如下所示：

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

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

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中，當一個數(shù)組有三個元素時沒有?key?屬性的話運行的時候是會出現(xiàn)錯誤的。

要是我們像下面這個代碼的話，數(shù)組里面直接是一堆便簽?zāi)敲淳蜁苯愉秩镜搅硪粋€父標簽里面，可以渲染到根div里面也可以渲染到我們的k的父元素的?div?中。代碼如下所示：

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

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

如果我們在代碼中沒有標簽包裹著的話就會直接渲染到頁面中。

在遍歷數(shù)組中我們可以按照下面這個代碼來作為參考：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的基本語法有哪些？”的相關(guān)內(nèi)容，希望對大家有所幫助，更多有關(guān)于react相關(guān)的內(nèi)容我們都可以在react 入門課程中進行學(xué)習和了解，當然如果你有更的理解也可以和大家一同分享探討。