事先準備

  • VScode安裝 : 我們之後將會使用VScode來撰寫程式碼，所以這個請自行安裝~
  • Node.js安裝 : 請先確認你的電腦中是否已經安裝好Node.js
    • 確認方式 : 在終端機輸入以下指令
      1
      node -v
    • 如果畫面有顯示版本數字 :
      • 代表你電腦中已經有Node.js了!
    • 如果畫面中未顯示版本數字或是版本數字小於v5.2.0 :

VScode相關設定

  • Extensions安裝 :
    1. 在VScode Extensions搜尋並安裝Simple React Snippets，以便我們之後撰寫程式碼~

  • Settings調整 :
    1. 點擊VScode畫面左下角的齒輪符號，並點擊Settings
    2. 在搜尋欄搜尋Emmet，找到「Emmet: Include Languages」
    3. 點擊Add Item，將key和value新增以下的值 :

建立專案

  1. 開啟cmd，假設我們要在名為Tuts的資料夾中新建名為dojo-blog的React專案
  2. 輸入以下指令建立專案 : 
    1
    npx create-react-app dojo-blog
    • npx : Node.js的專用指令名稱
    • create-react-app : 選擇建立之專案類型
    • dojo-blog : 專案名稱
  3. 等它跑完，就代表已建立完成!

專案結構簡介

  • 一個React專案中主要有三個檔案，分別為 :
    1. node_modules : 儲存這個專案所需要的所有Dependencies
    2. public : 會投放到使用者裝置上的程式碼(EX: 瀏覽器、App等等)
    3. src : 我們平常會使用此資料夾的內容去操作專案內容
      • 補充 :
        • src資料夾中的reportWebVitals.js與App.test.js用不到，通常我們會將其刪掉
        • 同時，要將index.js中的以下兩行程式碼刪除 
          1
          2
          3
          4
          //...
          import reportWebVitals from './reportWebVitals';
          //...
          reportWebVitals();

執行專案

  • 接下來，可以利用VScode中的Terminal，輸入以下指令執行專案 : 
    1
    npm run start
  • 等它讀取完，在瀏覽器中輸入http://localhost:3000/，便可以看到成功執行的畫面!

補充

  • 由於node_modules資料夾檔案其實很大，所以多數使用者在上傳React專案時，並不會附上此資料夾
  • 因此，我們在網路上下載其他人的專案時，往往也是沒有node_modules資料夾中
  • Q : 那要如何執行沒有node_modules資料夾的專案呢 ?
    • A : 開啟cmd，並cd到專案資料夾，之後輸入以下指令 
      1
      npm install
    • 這樣就會自動幫此專案安裝node_modules資料夾與其內容，之後也就可以npm run start了~