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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM