React 環境搭建及頁面調試方法
|作者:RexFang
|出處:http://www.cnblogs.com/rexfang/
|關於作者:Java 程序員一枚
|版權:本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接。如有問題,可以郵件:fangruitao.work@foxmail.com
注:本文件主要介紹 React 入門環境的搭建,以及調試 Demo 的基本方法,更加完整的信息,請前往官網查看:https://facebook.github.io/react/docs/hello-world.html
安裝 Nodejs
- 下載地址:https://nodejs.org/en/download/
- 默認安裝即可,安裝完成后,WIN+R 輸入 cmd,打開命令行
- 輸入 node -v,可以看到 Nodejs 的版本信息
- 輸入 npm --version,可以看到 npm 的版本信息
安裝 React
- 輸入 npm install -g create-react-app,等待一段時間以完成 React 的安裝
創建 React 應用
- 創建一個文件夾,在命令行,進入前面創建的文件夾,輸入 create-react-app my-app 創建 React 應用, 應用名稱為“my-app”,等待一段時間以完成 React 應用的創建
React 應用的啟動和關閉
- 應用創建完成后,在命令行輸入 cd my-app,進入應用目錄,輸入 npm start 即可啟動 my-app React 應用
- 啟動完成后,在瀏覽器輸入 http://localhost:3000/ 即可訪問到 React 應用
- 如果要關閉 React 應用,只需要在命令行按下 Ctrl+D ,此時會提示 “終止批處理操作嗎(Y/N)?” ,按提示輸入 Y 回車即可關閉 React 應用(發現輸入 N 回車都可以關閉應用,這也許是一個 BUG,不過不影響我們學習)
訪問自己寫的 JS
- 應用創建完成后,有一個實例的 JS 文件 App.js,被 index.js 文件所引用,后續可以自己模仿 App.js 文件寫自己的 JS,然后在 index.js 文件中替換掉 APP.js 的引用,即可在瀏覽器看到自己寫的 JS 的效果
例如:
先在 src/demo/demo01 目錄先創建 HelloReact.js 文件
修改 index.js 文件,引入 import HelloReact from './demo/demo01/HelloReact',
修改 ReactDOM.render(, document.getElementById('root'));