ReactJs環境配置簡單介紹

admin發表於2017-04-12
ReactJS

現在React比較火熱，下面就介紹一下關於它最為基礎的知識。

先從它的環境配置入手:

一.配置環境:

1.下載npm:  https://nodejs.org/en/download/  並安裝。

2.此處安裝在目錄：D:\Program Files\nodejs。

3.配置環境變數：變數名：NODE_PATH 值：D:\Program Files\nodejs\node_modules。

4.開啟cmd，輸入node -v 如果出現對應版本號則成功。

二.測試程式:

初學者練習見官網：http://reactjs.cn/react/docs/getting-started.html  下載

在examples目錄下新建一個test目錄練習：Hello world。

此處有兩種方法：

1.引用JSXTransformer.js來在瀏覽器中進行程式碼轉換（由於reactjs應用的是jsx語法，故而需要一個指令碼來解析：jsx語法入口）

新建Index.html:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello,world</h1>,
document.getElementById('example') //此處要使用js原生的方法來獲取容器元素
)
</script>
</body>
</html>

2.離線轉換

使用之前裝的npm來進行離線轉換，這樣直接引用轉換完的js檔案即可

如何進行離線轉換呢？

1）.將之前的jsx程式碼獨立一個js檔案,這裡命名為test.js

[JavaScript] 純文字檢視 複製程式碼
React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

那麼相對應的index.html程式碼：

注意：

【1】JSXTransformer.js這個檔案無須引用，因為接下來會使用npm進行離線轉換。

【2】引用了一個js:<script src="../testResult/test.js"></script> 

此處引用的js是即將使用npm處理完畢後的js檔案

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="../../build/react.js"></script>
</head>
<body>
<div id="example"></div>
<script src="../testResult/test.js"></script>
</body>
</html>

2）.使用jsp --watch命令進行轉換（此處官方示例給的是jsx --watch src/ build/ 即監聽此資料夾並將修改後的js檔案也儲存至此，為了更加清晰將解析後的js檔案另放一個資料夾並引用次檔案：

jsp --watch E:\test\react-0.13.0\react-0.13.0\examples\test E:\test\react-0.13.0\react-0.13.0\examples\testResult）

這樣就得到了轉換之後的js檔案並且頁面中直接引用次檔案即可：

[JavaScript] 純文字檢視 複製程式碼
React.render(
  React.createElement("h1", null, "Hello, world!"),
  document.getElementById('example')
);

相關文章