溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么搭建React的運(yùn)行環(huán)境

發(fā)布時間：2022-04-20 15:59:54 來源：億速云 閱讀：115 作者：iii 欄目：大數(shù)據(jù)

今天小編給大家分享一下怎么搭建React的運(yùn)行環(huán)境的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

這里有兩種方式，一種是使用npm，另一種是不使用npm。下面我們先來看不使用npm的方式。

不用npm的方式引入React

對于這種方式，我們需要首先下載React和React-dom的庫文件。然后引入到html文件中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById(&lsquo;content&rsquo;)
      );
    </script>
  </body>
</html>

上面的例子中，在Javascript中的XML語法被稱為JSX，對于這種語法，在<script>標(biāo)簽中其type必須為&ldquo;text/babel&rdquo;。但是這種語法是無法直接被瀏覽器解析的，因此需要上面的第三個文件browser.min.js將這種Js轉(zhuǎn)換成原生的Js代碼，然后再由react.js和react-dom.js解析自己的語法來執(zhí)行。當(dāng)然這里面涉及到一個知識點(diǎn)，那就是babel。至于對babel的詳細(xì)了解本篇文章不做介紹，我們可以認(rèn)為其就是一個轉(zhuǎn)換器，當(dāng)然這個轉(zhuǎn)換是通過browser.min.js來進(jìn)行的。

下面我們可以將上面html中的JSX代碼分離出來，單獨(dú)寫到一個文件src/hw.js中

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById(&lsquo;content&rsquo;)
);

因此上述html可以更新為如下代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src=&rdquo;src/hw.js&rdquo;></script>
  </body>
</html>

這里需要注意，這種情況有的瀏覽器（例如谷哥瀏覽器）是無法加載src/hw.js的，只能通過http地址的方式才可以加載。這是官網(wǎng)上說的，我沒有驗(yàn)證過，不過我們最好是通過url絕對地址的方式來引入上面的文件。

對于這樣的方式，其實(shí)最消耗時間的是通過babel將JSX轉(zhuǎn)換成Javascript語法的過程。因此我們通常是將這一步放在服務(wù)器上面執(zhí)行的。也就是說我們一般情況下是不直接在客戶端使用buile/browser.min.js來轉(zhuǎn)換JSX的。所以在瀏覽器解析之前就已經(jīng)由服務(wù)器直接轉(zhuǎn)換完成，客戶端直接去調(diào)用轉(zhuǎn)換完成的文件即可。

服務(wù)器端轉(zhuǎn)換

首先我們應(yīng)該在服務(wù)器端先安裝babel

# npm install &ndash;global babel-cli
# npm install babel-preset-react

然后開始轉(zhuǎn)換我們先前新建的src/hw.js文件

以上就是“怎么搭建React的運(yùn)行環(huán)境”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手