react起手式

從CDN引入React（不推薦）

引入React要比Vue要麻煩，Vue只需引入一個即可，而React同時要引入三個: React，ReactDOM, babel-standalone，在bootCDN中引入，注意引入順序，先React，再ReactDOM,最后引入babel-standalone

引入
  • React: <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
  • ReactDOM: <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
  • babel-standalone：<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
上面三個東西是什么
  • React：React是react的核心庫，
  • ReactDOM：提供操作DOM的react的擴(kuò)展庫，
  • babel-standalone：解析JSX語法代碼，轉(zhuǎn)化為js代碼的庫
代碼示例：顯示hello lucidity
  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">    type的類型便不再是javascript，而是babel，
      const Vdom =( <div>          虛擬DOM
          <h1>hello lucidity</h1>
      </div>)
      ReactDOM.render(Vdom, document.getElementById('app'))   渲染到真實DOM上
    </script>
  </body>

其實，我們不引入babel-standalone也是可以寫代碼的，但是很不方便，看下面的栗子：要求div里面有一個span標(biāo)簽和h1標(biāo)簽

引入babel-standalone的代碼

  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">
      const Vdom =( <div>
        <span>hello lucidity</span>
          <h1>hello lucidity</h1>
      </div>)
      ReactDOM.render(Vdom, document.getElementById('app'))
    </script>
  </body>

下面是不引入的代碼

  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script>
        const Demo = React.createElement('div',null,[
          React.createElement('span',null,'hello lucidity'),
          React.createElement('h1',null,'hello lucidity') 
          //////React.createElement括號里面（標(biāo)簽，標(biāo)簽屬性，標(biāo)簽內(nèi)容）對應(yīng)h1，屬性無，'hello lucidity'，標(biāo)簽屬性也可以寫成對象的形式
        ]);
        ReactDOM.render(Demo,document.querySelector('#app'))
    </script>
  </body>

通過對比，顯然引入babel-standalone，使用jsx語法看起來更加簡潔

通過webpack引入React（老手用）

webpack已經(jīng)將上面三個東西配置好了

通過create-react-app引用

和vue-cli類似，
做項目再用，學(xué)習(xí)用cdn引入就行

虛擬DOM與真實DOM

什么是虛擬DOM？什么是真實DOM，看栗子

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">   
    const Tdom = document.querySelector("#app")
      const Vdom =( <div>          
          <span>hello lucidity</span>
      </div>)
      ReactDOM.render(Vdom, Tdom)   
      console.log(Vdom);
      console.log(Tdom);
    </script>

  </body>

我們分別打印上面的Vdom和Tdom，看看它們到底是什么東西

image.png

關(guān)于虛擬DOM

  • 本質(zhì)是Object類型的一般對象
  • 虛擬DOM與真實DOM相比較‘輕’，因為虛擬DOM是React內(nèi)部在用，無需真實DOM上那么多屬性（點開控制臺中打印的內(nèi)容即可查看）
  • 虛擬DOM最終會被React轉(zhuǎn)化為真實DOM，呈現(xiàn)在頁面上

JSX語法規(guī)則

如何給元素添加類名
  • 要用className，比如要給上面圖中span添加一個.red類名：
    <span className = "red">hello lucidity</span>
  • 如何用內(nèi)聯(lián)樣式寫呢
    <span className="red" style = {{fontSize: '100px',color: 'white'}}>hello lucidity</span>
    內(nèi)聯(lián)樣式要用{{}}，外面{}表示要寫js表達(dá)式了，里面的{}表示要寫的是一個對象；注意：要寫多個屬性是，用逗號隔開；像font-size這樣的，要使用駝峰
綁定一個數(shù)據(jù)

比如說：let n= 'HELLO'，把n放在lucidity的前面，要用{}包裹<span className = "red">{n.toLowerCase()}lucidity</span>

只有一個根標(biāo)簽
      const Vdom =( 
        <div>          
          <span>{n.toLowerCase()} lucidity</span>
        </div>
        <div></div>
      )

寫成這樣就會報錯

如何進(jìn)行循環(huán)
  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">   

    const Tdom = document.querySelector("#app")   真實DOM
    let arr = [1,2,3]
      const Vdom =( 
        <ul>          
          {
            arr.map((num,index)=>{
                return <li key={index}>{num}</li>    要加key，要不然會報錯
            })
          }  
        </ul>
      )
      ReactDOM.render(Vdom, Tdom)   
    </script>
  </body>

ul下面的{}里面為什么用map，而不用for循環(huán)，因為{}里面必須為js表達(dá)式，而for循環(huán)不是表達(dá)式，而是js代碼語句
表達(dá)式有：

  • a
  • a+b
  • demo(1)
  • arr.map()
  • function demo() {}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.cdn引入，要引入兩個react,react-dom,注意順序先react,cdn很麻煩一般不使用, 2.um...
    Ories閱讀 386評論 0贊 0
  • 引入React CDN引入Reactbootcdn cjs 和 umd 的區(qū)別 cjs 全稱是 Common JS...
    fanison閱讀 558評論 0贊 0
  • React框架學(xué)習(xí) React的起源和發(fā)展 起初facebook在建設(shè)instagram（圖片分享）的時候嘞，因為...
    hcySam閱讀 772評論 0贊 1
  • 初識React與JSX 加載引入 -基于瀏覽器\ 的模式 -基于自動化的集成環(huán)境模式 基于瀏覽器\ 的模式 Rea...
    kino2046閱讀 189評論 0贊 0
  • React框架學(xué)習(xí) React的起源和發(fā)展 React的出發(fā)點 React與傳統(tǒng)MVC的關(guān)系 React高性能的體...
    J_Ronaldo閱讀 531評論 0贊 1

友情鏈接更多精彩內(nèi)容