我的 React 之旅：第 20 天

預算追蹤項目

今天，我參與了一個名為預算追蹤器的專案。該專案的目標是以實用和功能性的方式應用先前學到的概念。以下是我實施的概念以及它們如何提高我的技能的概述：

學習與應用的概念

1.HTML結構與語意

• 我為預算追蹤器使用了語義和結構良好的 HTML 佈局，確保清晰度和易於維護。例如，使用表格元素來組織預算條目，並新增輸入欄位來收集資料。

2.CSS 樣式
學會了設計項目的功能性和美觀性：

• 使用 .budget-tracker、.input 和 .delete-entry 等類別來設計和建構 UI。
• 專注於響應式設計原則，確保追蹤器在不同的螢幕尺寸上運作。
• 為 .delete-entry 等按鈕添加了懸停效果，以提高互動性。

3.JavaScript 模組

• 我透過建立一個單獨的 BudgetTracker.js 類別來模組化我的 JavaScript。這提高了程式碼的可重用性和關注點分離。

4.本地儲存

• 我實作了本地儲存來保存跨會話的預算條目。使用者可以重新載入應用程式而不會遺失資料：

localStorage.setItem("budget-tracker-entries-dev", JSON.stringify(data));

5.動態 DOM 操作

• 使用 JavaScript 動態建立和更新預算表中的行：

this.root.querySelector(".entries").insertAdjacentHTML("beforeend", BudgetTracker.entryHtml());

6.事件處理
我使用事件偵聽器使應用程式具有互動性。例如：

• 點選「新條目」按鈕會新增一行。
• 點選「刪除」按鈕可刪除一行。

row.querySelector(".delete-entry").addEventListener("click", e => {
    this.onDeleteEntryBtcClick(e);
});

7.資料驗證與格式化

• 應用邏輯來計算總收入或支出，並使用 Intl.NumberFormat 以適當的格式顯示它：

const totalFormatted = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD"
}).format(total);

8.版本控制與除錯

• 使用瀏覽器開發工具來偵錯錯誤並檢查動態元件的行為。

專案成果

這個專案讓我更深入了解：

• 使用 HTML 和 CSS 設計使用者友善的介面。
• 整合 JavaScript 邏輯以動態處理資料。
• 程式碼模組化對於擴充專案的重要性。
• 使用本機儲存來維護狀態。

這個專案也提升了我解決問題的能力，因為我面臨著處理空白輸入欄位和確保準確計算等挑戰。

追蹤器包含日期、描述、類型和金額的輸入字段，以及顯示總餘額的動態摘要部分。

這個專案增強了我建立實際應用程式的信心！ ？

準備好深入研究 React Native

以上是我的 React 之旅：第 20 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！