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

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

引入：

我們都知道在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>?,其他的相關操作都是在jsx.js的文件中進行使用的，而且在瀏覽頁面的時候要進行切換到我們的服務器模式。

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

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

我們在代碼中可以看到，?ReactDOM.render(html,target[,callback])?將內容渲染到指定的節(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") ) ?通過代碼我們的頁面就會顯示一個可以跳轉到百度的一個 ?a? 標簽 記憶點: 1 { } 就代表進入javascript 的執(zhí)行環(huán)境 。

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

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

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"},"復雜超鏈接2")
ReactDOM.render(
  <div>{ d }</div>,
document.querySelector(".box")
)

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

對于嵌套寫法的方法，我們也是通過什么的案例來進行修改，下面是相關的代碼：

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)就很明顯我們通過使用嵌套的代碼相對于沒有使用的代碼會比較少。下面是一張有關于jsx語法的相關內容大家可以作為參考：

從截圖中我們知道必須要有結束的斜杠結束符 ?<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?才可以，對于一些關鍵字的話是需要進行轉換的，例如： ?class ?要寫成 ?className?, ?label ?標簽的?for?屬性 要寫成? htmlFor?，如果我們在開發(fā)的時候使用的label的標簽時屬性不是?htmlfor?的話是會報錯的。所以我們需要進行改正。

const j = [
    
        <h1 key="1">數組一</h1>,
        <h1 key="2">數組二</h1>,
        <h1 key="3">數組三</h1>
    
]
ReactDOM.render(
<div>
{ j }
</div>
)
document.querySelector(".box")

我們如果在代碼中，當一個數組有三個元素時沒有?key?屬性的話運行的時候是會出現(xiàn)錯誤的。

要是我們像下面這個代碼的話，數組里面直接是一堆便簽那么就會直接渲染到另一個父標簽里面，可以渲染到根div里面也可以渲染到我們的k的父元素的?div?中。代碼如下所示：

const l =["數組四","數組5","數組6"];

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

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

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

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

下面這是一張有關于react相關內容的截圖，大家可以作為參考:

以上就是有關于“react的基本語法有哪些？”的相關內容，希望對大家有所幫助，更多有關于react相關的內容我們都可以在react 入門課程中進行學習和了解，當然如果你有更的理解也可以和大家一同分享探討。