create-react-app 是開始使用 React 應用的最簡單方法。

create-react-app 是一個旨在讓您快速掌握 React 的項目。它提供了一個現成的 React 應用程序起始器，讓您可以開始構建應用程序，而不必處理 Webpack 和 Babel 的配置。

它提供了以下功能：

  • 具有熱重載的開發服務器
  • 集成了 Jest 的測試環境
  • 构建 React 應用程序的能力
  • 兼容 ES6+ 語法
  • 打包所有 JavaScript 和資源文件
  • 包含 CSS 自動添加器、SASS 和 CSS Modules 支持
  • 等等！

您可以通過使用 npx 開始使用，這是一種在不安裝命令的情況下下載和執行 Node.js 命令的簡單方法。npx 隨 npm 一起提供（自版本 5.2 起）。如果您尚未安裝 npm，請從 https://nodejs.org 安裝（npm 會隨 Node 一同安裝）。

如果您不確定自己的版本，我建議您檢查是否需要更新。

提示：如果您對終端機不熟悉，請查看我的終端機教程 https://flaviocopes.com/macos-terminal/。

當您運行 npx create-react-app <app-name> 時，npx 將下載最新的 create-react-app 版本，並運行它，然後將其從您的系統中刪除。這非常好，因為您的系統上永遠不會有過時的版本，每次運行該命令時，您都會獲得最新和最好的代碼。

讓我們開始：

npx create-react-app todolist

執行完畢時的截圖：

這是執行完成後的截圖：

create-react-app 在您指定的文件夾中（此例中為todolist）創建了文件結構，並初始化了 Git 存儲庫。

它還在 package.json 文件中添加了一些命令，因此您可以直接進入該文件夾並運行 npm start 開始應用程序。

除了 npm start，create-react-app 還添加了其他一些命令：

  • npm run build：將 React 應用程序文件構建到 build 文件夾中，準備部署到服務器上
  • npm test：使用 Jest 运行測試套件
  • npm eject：退出 create-react-app

退出後，您將失去自動更新的能力，但在 Babel 和 Webpack 配置方面獲得更多的靈活性。

退出操作是不可逆的。您的應用程序目錄中將生成2個新文件夾，config 和 scripts。它們包含您所需要的所有配置，現在您可以開始編輯它們。