React 環境搭建及頁面調試方法

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'));