溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下怎么搭建React的運行環境的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
這里有兩種方式，一種是使用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(‘content’)
);
</script>
</body>
</html>
上面的例子中，在Javascript中的XML語法被稱為JSX，對于這種語法，在<script>標簽中其type必須為“text/babel”。但是這種語法是無法直接被瀏覽器解析的，因此需要上面的第三個文件browser.min.js將這種Js轉換成原生的Js代碼，然后再由react.js和react-dom.js解析自己的語法來執行。當然這里面涉及到一個知識點，那就是babel。至于對babel的詳細了解本篇文章不做介紹，我們可以認為其就是一個轉換器，當然這個轉換是通過browser.min.js來進行的。
下面我們可以將上面html中的JSX代碼分離出來，單獨寫到一個文件src/hw.js中
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘content’)
);
因此上述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=”src/hw.js”></script>
</body>
</html>
這里需要注意，這種情況有的瀏覽器（例如谷哥瀏覽器）是無法加載src/hw.js的，只能通過http地址的方式才可以加載。這是官網上說的，我沒有驗證過，不過我們最好是通過url絕對地址的方式來引入上面的文件。
對于這樣的方式，其實最消耗時間的是通過babel將JSX轉換成Javascript語法的過程。因此我們通常是將這一步放在服務器上面執行的。也就是說我們一般情況下是不直接在客戶端使用buile/browser.min.js來轉換JSX的。所以在瀏覽器解析之前就已經由服務器直接轉換完成，客戶端直接去調用轉換完成的文件即可。
服務器端轉換
首先我們應該在服務器端先安裝babel
# npm install –global babel-cli
# npm install babel-preset-react
然后開始轉換我們先前新建的src/hw.js文件
以上就是“怎么搭建React的運行環境”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
