建立專案

前一篇,我們安裝好了create-react-app,現在就可以用它來建立我們的專案。

  1. 請建立一個放專案的資料夾
  2. 開啟終端機 ( terminal/cmd )
  3. 移動至「步驟1建立的資料夾」的位置
    在windows/linux/mac中,移動的指令都是cd 路徑
    如果要回到上一層,則是使用cd ..
    (windows系統當打開cmd時,會預設在C:\User\使用者名稱下。)
  4. 輸入以下指令:
    create-react-app hello-world
    

    等跑完後,專案就會被建立。
    hello-world是我們的專案名稱,你也可以把它改成你想要的名字。

  5. 用終端機移動到「步驟1資料夾」中的hello-world資料夾
    或是
    用vscode的open folder開啟「步驟1資料夾」中的hello-world資料夾,因為vscode的終端機會自動切換到開啟的目錄下
    vscode_open_folder
  6. 用終端機輸入(如果你是用vscode的,可以用vscode所提供的終端機)
    npm start
    

    如果有出現下圖,就代表專案建立成功了

    vscode_terminal_react-scripts start

  7. 瀏覽器就會自動打開進入localhost:3000
    網頁出現下圖:
    vscode_learn_react
    這就是create-react-app預先寫好的網頁
    當你做更改時,結果也會呈現在這個頁面。

要怎麼開發

前面有提過,像React這類的新JS語法,必須要經由打包、編譯 (preprocessing),才能在瀏覽器上運作。然而編譯這個動作需要花上一點點時間。如果我們在撰寫程式的過程中,想一邊寫一邊看結果是否正確,這樣每次都要花時間preprocessing不是很浪費時間嗎?

還好,打包工具(webpack)有類似預覽的功能,而在create-react-app中已經幫我們設定好了:

打開terminal切換至專案目錄,執行

npm start

稍微跑一下之後,網站就會以local端3000 port自動跳出。此時只要你修改程式碼之後儲存,編譯器就會先幫你檢查程式是不是有語法等錯誤後(顯示在terminal),立即把更改的結果顯示在剛剛跳出網站上。這也是為什麼在前面我們用這個指令來確認專案是否建立成功。create-react-app已經幫我們設定好打包,因此寫完code之後我們只要做編譯的動作。

完成開發

打開terminal切換至專案目錄,執行

npm run build

這個時候編譯就會開始。當編譯結束時,專案目錄底下會出現build資料夾,build裡面的檔案就是部署網站所需要的靜態檔案(可以點開index.html試試看),其他檔案在部署時可以不用上傳

小結

要注意的是,npm start所預覽的結果仍然有可能和npm run build有誤差,原因是npm run build預設是把所有程式碼打包成一個.html & .js & .css檔。容易發生誤差的點在之後的章節會提到。

總結來說,開發的流程像是這個樣子:

建立react專案 -> npm start -> 編寫程式碼 -> 在local端確認執行結果 -> npm run build -> 將build資料夾內的檔案部署到伺服器。

接下來,我們就可以開始學code囉~

簡介專案結構(可省略)

(.vscode) (如果你有設定vscode的debugger)
|____ (launch.json)
build (如果你執行過npm run build)
public
|____ index.html
|____ favicon.ico
|____ manifest.json
src
|____ index.js
|____ index.css
|____ App.js
|____ App.test.js
|____ App.css
|____ service-worker.js
|____ logo.svg
    
node_modules
package.json
package-lock.json
README.md
(.gitignore)
  • .vscode(預設隱藏):
    設定vscode的debugger。
  • build:
    經preprocessing之後用來部署的檔案,npm run build後出現。
  • public:
    放打包前html檔的地方,favicon.ico 和 manifest.json 是跟預設的icon有關。
  • src:
    在preprocessing前的程式碼,我們大部份都會編輯這個資料夾內的程式碼
  • node_modules:
    開發者用 npm/yarn 所載下來的套件會放在這裡。
    ( 如果套件出了問題,可以試著把這個資料夾砍掉之後執行npm i )
  • package.json:
    和設定打包工具(webpack)有關,前面提到的指令也設定在裡面。
  • package-lock.json:
    專案資訊。主要是用來紀錄你在這個專案用 npm/yarn 載了哪些套件。因為node_modules很大,一般如果要和別人一起開發專案,我們不會把node_modules傳給協作者,而是把package-lock.json傳給協作者後,協作者執行npm i(或yarn)就能載到相同的套件。
  • .gitignore(預設隱藏):
    設定在使用版本控制軟體git時,哪些東西不能被add (例如: node_modules),執行git add --all時會自動忽略這些檔案。

額外: 設定vscode的debug

就只是設定當按下綠色三角形時會自動用瀏覽器開啟localhost:3000。
如果你使用vscode,可以照著以下方法設定debugger:

  1. 點擊左側Debug
    vscode_debug
  2. 點開左上綠色三角形旁邊的選單中的add configuration
    vscode add configuration
  3. 此時vscode會自動建立.vscode資料夾,以及launch.json。
    launch.json會自動跳出頁面
    請把launch.json改成以下內容:

    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome against localhost",
                "url": "http://localhost:3000/",
                "webRoot": "${workspaceFolder}",
            }
        ]
    }
    

    vscode launch.json

  4. 點擊左上綠色三角形,選擇右側選單中的「Launch Chrome against localhost」,vscode就會自動用chrome打開目前撰寫的網頁。
    vscode launch2.json