在 React 開始 React-Scripts

從頭開始構建 React 應用程式在技術上是可行的，但你必須建立所有檔案並調整配置，這可能非常耗時。因此，你可以使用 create-react-app，它為開發你的 React 應用程式提供了一個友好的環境。它還包括可用於啟動開發伺服器、啟用熱過載和其他基本功能的指令碼和配置。

create-react-app 中的 react-scripts

安裝 create-react-app 包允許你使用一個命令設定功能齊全的 React 應用程式。作為開發人員，你只需在命令列中鍵入 npm run start 即可在本地主機伺服器上建立實時應用程式。基本的 create-react-app 配置還包括執行應用程式所需的一整套指令碼。這樣配置是為了省去初學者自己配置專案的麻煩。但是，可以在 package.json 檔案中自定義 react-scripts。

react-scripts start

要執行此指令碼，請在命令列中執行 npm run start。你也可以使用速記命令 npm start。它告訴 create-react-app 設定開發環境、啟動本地伺服器和熱模組重新載入。

你的 package.json 檔案應該包含一個 scripts 物件，帶有引用指令碼名稱和執行引用的鍵值對。這只是告訴 React 執行 npm-run-all -p watch-css start-js 命令的一種更簡單的方法，該命令執行多個操作。在這種情況下，npm run start 會觸發兩個指令碼的執行：watch-css 和 start-js。前者確保將 .scss 檔案轉換為常規的 .css 檔案，並且你的樣式更改會自動反映在你的應用程式中。後者告訴 React 在開發模式下設定應用程式並使用 localhost:3000 來託管它。

定製

npm start 只是一個命令。如果需要，你可以自定義其操作。例如，你可以配置 localhost 埠來託管應用程式。下面是一個例子：

"scripts": {
    "start": "set PORT=8000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

在這裡，我們明確地告訴指令碼使用 localhost:8000 埠而不是預設埠。

你還可以通過在命令列中輸入 npm run scriptName 來執行其他指令碼。如果你正在執行 create-react-app 應用程式並且無法弄清楚 script 的作用，請檢視 package.json 檔案。