如何在 React 中構建一個簡單的計數器應用程序

React 是最流行的前端 JavaScript 庫之一。許多公司使用 React 來開發他們的用戶界面，並且它在開發人員中廣受歡迎。

使用 React 構建一個簡單的程序很容易，比如這個基本的計數器應用程序。從一個簡單的教程開始將幫助您掌握 React 的一些基本但重要的概念。

計數器應用程序的功能

在此項目中，您將開發具有以下功能的計數器應用程序：

1. 增加計數按鈕：這將使計數增加一。
2. 減少計數按鈕：這會將計數減一。
3. 重置按鈕：這會將計數設置為零。

React 的基本概念

在繼續之前，您需要了解您將在本項目中使用的 React 中的一些基本概念：

1. 組件：組件是 React 應用程序的核心構建塊。它們包含獨立的、可重用的代碼。使用組件，您可以將用戶界面拆分成單獨的部分。然後您可以重複使用這些部分並獨立使用它們。
2. 狀態：在 React 中，您可以使用對象來存儲表示組件狀態的數據。這允許組件管理和更新它們自己的數據。組件的狀態決定了它的呈現方式和行為方式。
3. 功能組件：React 的功能組件只是一個 JavaScript 函數，它接受 props 作為參數並返回一個 React 元素 (JSX)。
4. Props：您可以使用 props（“屬性”的縮寫）將數據從父組件傳遞到子組件。Props 是 React 的組成部分之一，您可以使用 props 在 React 中執行多個操作。
5. Hooks：React Hooks 是內置函數，允許您管理狀態和其他 React 功能，例如功能組件內的生命週期方法。它們還可以幫助您編寫簡潔明了的代碼。您很快就會看到如何使用useState()掛鉤管理狀態。

第 1 步：設置項目

打開您的終端並運行以下命令以開始使用：

npx create-react-app react-counter-app

這將創建一個新的 React 應用程序，為您準備好開始構建您的項目。它將生成一個包含多個文件和文件夾的文件系統結構。

在終端中運行以下命令啟動開發服務器：

npm start

該命令應在瀏覽器中打開一個新選項卡，指向 http://localhost:3000。您對項目所做的所有更改都將在此處自動更新。

第 2 步：創建櫃檯應用程序的骨架

打開src/App.js文件並刪除那裡存在的所有默認代碼。現在，使用以下代碼創建應用程序的框架：

import React, { useState } from "react";


function App() {
  const [count, setCount] = useState(0);
  let incrementCount = () => {
 // To add later
  };
  let decrementCount = () => {
 // To add later
  };
  let resetCount = () => {
  // To add later
  }

export default App;

第一條語句從react模塊導入useState鉤子。使用它創建計數狀態並將其初始化為 0。您可以使用setCount函數更改計數值。

稍後您將使用incrementCount、decrementCount和resetCount函數來增加、減少和重置計數器的值。

您可能會注意到標記中計數變量周圍使用的大括號 { }。這實質上讓 JSX 解析器知道它應該將這些大括號內的內容視為 JavaScript。

第 3 步：將功能添加到櫃檯應用程序

您需要創建三個按鈕來實現計數器應用程序的功能：遞減計數按鈕、遞增計數按鈕和重置按鈕。在按鈕div中添加以下代碼：

<Button title={"Decrement"} action={decrementCount} />
<Button title={"Increment"} action={incrementCount} />
<Button title={"Reset"} action={resetCount} />

單擊這些按鈕時，將運行decrementCount、incrementCount和resetCount函數。請注意，您正在將title和action道具從父App組件傳遞到子Button組件。

使用以下代碼更新App.js文件中的這些函數：

let incrementCount = () => {
  setCount(count + 1);
};


let decrementCount = () => {
  setCount(count - 1);
};

let resetCount = () => {
  setCount(0);
}

setCount函數將更新count的狀態。

請注意，您尚未創建 Button 組件。在src目錄中創建一個新的組件文件夾，然後創建一個名為Button.js的新文件。將所有組件保存在同一個文件夾中是一種很好的做法。

在components/Button.js文件中添加以下代碼：

import React from "react";


function Button(props) {
    let { action, title } = props;
    return <button onClick={action}>{title}</button>;
}

export default Button;

Button組件通過props 接收數據。然後該函數將這些 props 結構化為單獨的變量，使用它們來填充它返回的標記。

代碼重複使用此組件三次來創建遞增、遞減和重置按鈕。

最後，使用以下代碼在App.js頁面的頂部導入 Button 組件：

import Button from "./components/Botton";

這是最終代碼在App.js文件中的樣子：

import React, { useState } from "react";
import Button from "./components/Button";


function App() {
  const [count, setCount] = useState(0);

export default App;

遵循最佳 React 實踐

你可以用不同的方式編寫 React 代碼，但盡可能清晰地構建它很重要。這將確保您可以輕鬆維護它，並有助於提高應用程序的整體性能。

您可以遵循 React 社區推薦的幾種 React 實踐，例如避免重複代碼、為每個 React 組件編寫測試、對 props 使用對象解構以及遵循命名約定。