私の React の旅: 20 日目

予算トラッカー プロジェクト

今日、私は Budget Tracker というタイトルのプロジェクトに取り組みました。このプロジェクトの目標は、以前に学んだ概念を実践的かつ機能的な方法で適用することでした。ここでは、私が実装したコンセプトと、それが私のスキルをどのように強化したかの概要を示します:

学習および適用された概念

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 中国語 Web サイトの他の関連記事を参照してください。