ReactJS - 使用 Create React App 工具

---

---

讓我們學習如何使用 Create React App 工具建立一個費用管理應用程式。

開啟終端並進入您的工作區。

> cd /go/to/your/workspace

接下來，使用 Create React App 工具建立一個新的 React 應用程式。

> create-react-app expense-manager

它將建立一個名為 expense-manager 的新資料夾，其中包含啟動模板程式碼。

接下來，進入 expense-manager 資料夾並安裝必要的庫。

cd expense-manager 
npm install

npm install 命令將在 node_modules 資料夾下安裝必要的庫。

接下來，啟動應用程式。

npm start
Compiled successfully! 
You can now view react-cra-web-app in the browser. 

   Local:            https://:3000 
   On Your Network:  http://192.168.56.1:3000
 
Note that the development build is not optimized. 
To create a production build, use npm run build.

接下來，開啟瀏覽器並在位址列中輸入 https://:3000 並按 Enter 鍵。開發 Web 伺服器將提供我們的網頁，如下所示。

讓我們分析一下 React 應用程式的結構。

檔案和資料夾

React 應用程式的內容如下：

|-- README.md
|-- node_modules
|-- package-lock.json
|-- package.json
|-- public
|  |-- favicon.ico
|  |-- index.html
|  |-- logo192.png
|  |-- logo512.png
|  |-- manifest.json
|  `-- robots.txt
`-- src
   |-- App.css
   |-- App.js
   |-- App.test.js
   |-- index.css
   |-- index.js
   |-- logo.svg
   |-- reportWebVitals.js
   `-- setupTests.js

這裡：

package.json 是表示專案的核心檔案。它配置整個專案，包括專案名稱、專案依賴項以及構建和執行應用程式的命令。

{
   "name": "expense-manager",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
      "@testing-library/jest-dom": "^5.11.6",
      "@testing-library/react": "^11.2.2",
      "@testing-library/user-event": "^12.6.0",
      "react": "^17.0.1",
      "react-dom": "^17.0.1",
      "react-scripts": "4.0.1",
      "web-vitals": "^0.2.4"
   },
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
   },
   "eslintConfig": {
      "extends": [
         "react-app",
         "react-app/jest"
      ]
   },
   "browserslist": {
      "production": [
         ">0.2%",
         "not dead",
         "not op_mini all"
      ],
      "development": [
         "last 1 chrome version",
         "last 1 firefox version",
         "last 1 safari version"
      ]
   }
}

package.json 在其依賴項部分引用了以下 React 庫。

• react 和 react-dom 是用於開發 Web 應用程式的核心 React 庫。

• web-vitals 是一個通用庫，用於在不同的瀏覽器中支援應用程式。

• react-scripts 是用於構建和執行應用程式的核心 React 指令碼。

• @testing-library/jest-dom, @testing-library/react 和 @testing-library/user-event 是用於在開發後測試應用程式的測試庫。

• public 資料夾 - 包含核心檔案 index.html 和其他 Web 資源，例如影像、徽標、robots.txt 等。index.html 載入我們的 React 應用程式並在使用者的瀏覽器中渲染它。

• src 資料夾 - 包含應用程式的實際程式碼。我們將在下一節中檢查它。

應用程式的原始碼

在本章中，讓我們檢查應用程式的每個原始碼檔案。

• index.js - 應用程式的入口點。它使用 ReactDOM.render 方法啟動並啟動應用程式。程式碼如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
   <React.StrictMode>
      <App />
   </React.StrictMode>,
   document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

這裡：

React.StrictMode 是一個內建元件，用於透過分析元件的不安全生命週期、不安全 API 使用、已棄用的 API 使用等併發出相關警告來防止意外錯誤。

• App 是我們應用程式的第一個自定義根元件。所有其他元件都將在 App 元件內渲染。

index.css - 用於整個應用程式的樣式。讓我們刪除所有樣式並從新的程式碼開始。

App.js - 應用程式的根元件。讓我們替換現有的 JSX 並顯示簡單的 hello react 訊息，如下所示：

import './App.css'; 
function App() { 
   return ( 
      <h1>Hello React!</h1> 
   ); 
} 
export default App;

• App.css - 用於設定 App 元件的樣式。讓我們刪除所有樣式並從新的程式碼開始。

• App.test.js - 用於為我們的元件編寫單元測試函式。

• setupTests.js - 用於為我們的應用程式設定測試框架。

• reportWebVitals.js - 通用 Web 應用程式啟動程式碼，用於支援所有瀏覽器。

• logo.svg - SVG 格式的徽標，可以使用 import 關鍵字載入到我們的應用程式中。讓我們將其從專案中刪除。