React と AWS DynamoDB を使用して拡張性の高いデータベース アプリケーションを構築する方法

React と AWS DynamoDB を使用して拡張性の高いデータベース アプリケーションを構築する方法

はじめに:

クラウド コンピューティングとビッグ データ テクノロジーの急速な発展に伴い、拡張性の高いデータベース アプリケーションの開発、構築はますます重要になっています。この記事では、React と AWS DynamoDB を使用して拡張性の高いデータベース アプリケーションを構築する方法を紹介し、読者の理解と実践に役立つ具体的なコード例を使用します。

1. React と AWS DynamoDB について

1. React: React は、ユーザー インターフェイスの構築に使用される JavaScript ライブラリです。ユーザー インターフェイスを再利用可能なコンポーネントに分割し、開発者がモジュール式で保守可能な方法でアプリケーションを構築できるようにします。
2. AWS DynamoDB: AWS DynamoDB は、Amazon が提供するフルマネージド NoSQL データベース サービスです。自動スケーラビリティを備えた高速で信頼性の高いパフォーマンスを提供します。

2. 開発環境をセットアップする

始める前に、開発環境をセットアップする必要があります。必要な手順は次のとおりです。

1. Node.js のインストールと構成: まず、Node.js をローカルにインストールする必要があります。公式 Web サイト https://nodejs.org からダウンロードしてインストールできます。インストールが完了したら、ターミナルを開いて次のコマンドを実行して、インストールが成功したかどうかを確認します。

   React プロジェクトを作成します: 次のコマンドを使用します 新しい React プロジェクトを作成します:

node -v
npm -v

ログイン後にコピー

2. AWS SDK をインストールします: プロジェクトのルート ディレクトリで次のコマンドを実行して、AWS SDK をインストールします:

npx create-react-app my-dynamodb-app
cd my-dynamodb-app

ログイン後にコピー

3. AWS 認証情報の構成: 新しい AWS アカウントを作成し、アクセス キーとシークレット キーを取得します。次に、ターミナルで次のコマンドを実行して AWS 認証情報を構成します。

npm install aws-sdk

ログイン後にコピー
4. プロンプトに従ってアクセス キーとシークレット キーを入力し、適切なリージョンを選択します。
   3. React と AWS DynamoDB の接続

DynamoDB テーブルの作成: AWS コンソールで新しい DynamoDB テーブルを作成し、必要な属性を定義します。たとえば、「id」と「name」の 2 つの属性を含む「Users」という名前のテーブルを作成できます。

1. React コンポーネントの作成: DynamoDB にデータを表示するための新しい React コンポーネントを作成します。 aws-sdk をコンポーネントに導入し、DynamoDB クライアントを作成し、そのクライアントを使用してテーブル内のデータをクエリします。以下は簡単な例です:

aws configure

ログイン後にコピー

2. React コンポーネントのレンダリング: DynamoDBApp をルート コンポーネントに導入し、DOM にレンダリングします。次のコマンドを使用して開発サーバーを起動し、結果を表示できます:

import React, { useEffect, useState } from 'react';
import AWS from 'aws-sdk';

const dynamoDB = new AWS.DynamoDB();

const DynamoDBApp = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const params = {
      TableName: 'Users',
    };

    dynamoDB.scan(params, (err, data) => {
      if (err) console.log(err);
      else setUsers(data.Items);
    });
  }, []);

  return (
    <div>
      <h1>Users</h1>
      {users.map((user) => (
        <div key={user.id.S}>
          <p>ID: {user.id.S}</p>
          <p>Name: {user.name.S}</p>
        </div>
      ))}
    </div>
  );
};

export default DynamoDBApp;

ログイン後にコピー

3. 4. アプリケーション機能を拡張する

データの作成: ユーザーがデータを入力して新しい DynamoDB アイテムを作成できるフォームをインターフェイスに追加します。 DynamoDB の put メソッドを使用して、データをテーブルに書き込みます。

データの更新: インターフェイスに編集ボタンを追加して、ユーザーが既存の DynamoDB アイテムを変更できるようにします。 DynamoDB の update メソッドを使用して、テーブル内のデータを更新します。
1. データの削除: インターフェイスに削除ボタンを追加して、ユーザーが DynamoDB アイテムを削除できるようにします。 DynamoDB の delete メソッドを使用して、テーブルからデータを削除します。
2. ページングの実装: データ量が多い場合は、ページングを通じてデータを取得して、アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させることができます。
4. 5. 概要

以上がReact と AWS DynamoDB を使用して拡張性の高いデータベース アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。