我的 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中文网其他相关文章！