react 官方推薦使用 一種JSX語法,類似xml
react.js 引入的時候放在react-dom.js的前面引入
引入jsx.js的時候,一定要指定 type="babel" 才能識別混寫的jsx.js 文件

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

基礎(chǔ)語法

我們先在index.html的文件里面寫一個div,
<div class="box"></div>
其他的操作都在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的后面要加一個逗號.)

變量用法 內(nèi)部解析

let msg = "Hello React!!!";
let ;
定義一個常量b
const b = <a href={ href }>{ msg }</a>
ReactDOM.render( <div>{ b }</div>, document.querySelector(".box") )

頁面就會顯示一個可以跳轉(zhuǎn)到百度的一個 a 標(biāo)簽
記憶點:
1 { } 就代表進入javascript 的執(zhí)行環(huán)境

不用jsx語法,用react 提供的語法怎么寫

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 標(biāo)簽,創(chuàng)建了一個href 屬性,

還有其他react方法,稍微簡單點的

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怎么寫

把子作為第三個參數(shù)創(chuàng)建進來 比e的方法要難一些,

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 ,代碼很多,一直在createElement,但是使用了的話,就直接使用標(biāo)簽就可以了

image.png

jsx真正的語法

image.png

樣式的設(shè)置,表達式語法

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 是樣式部分,const h 是標(biāo)簽部分,ReactDOM.render()是渲染頁面部分

關(guān)鍵字沖突

我們在index.html里面寫一點樣式

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

1 直接象在寫頁面樣式的時候class="cn"
是不可以的,要寫成className
2 對于一些關(guā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")
)

image.png

如果用for 就會報上面的錯誤
改成htmlFor 就不會報錯了
label 標(biāo)簽是應(yīng)用于 選擇的

跟標(biāo)簽及煩人的注釋寫法

ReactDOM.render(
  <div>
{/*這是一段注釋 jsx 的注釋必須用{}包裹,只能有一個根節(jié)點*/}
      { 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")

一個數(shù)組里面有三個元素,沒有key屬性的時候,會報錯

image.png

const k = <div>
<hr/>
    <h1>Hello</h1>
    { j }
</div>;
ReactDOM.render(
<div>
{ k }
</div>
)
document.querySelector(".box")

j 是一個數(shù)組,用{ } 放在那里都可以
如果數(shù)組里面直接是一堆標(biāo)簽,那么就會直接渲染到另一個父標(biāo)簽里面,可以渲染到跟div 里面,也可以渲染到 k 的父元素div 里面

數(shù)組

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

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

如果沒有標(biāo)簽包裹,就會直接渲染到頁面中,沒有標(biāo)簽包裹
我們可以這樣寫

使用map函數(shù)遍歷數(shù)組

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

image.png