React と MongoDB を使用してスケーラブルなデータベース アプリケーションを構築する方法

React と MongoDB を使用してスケーラブルなデータベース アプリケーションを構築する方法

現代のソフトウェア開発では、スケーラブルなデータベース アプリケーションを構築することがますます重要になっています。 React は人気のある JavaScript ライブラリとして、その効率的かつ柔軟なコンポーネントベースの開発手法で有名です。 MongoDB は、スケーラビリティと高いパフォーマンスを備えた非リレーショナル データベースです。この記事では、React と MongoDB を組み合わせてスケーラブルなデータベース アプリケーションを構築する方法を紹介し、対応するコード例を示します。

1. 開発環境をインストールして構成する
まず、対応する開発環境をインストールして構成する必要があります。 Node.js と npm (ノード パッケージ マネージャー) がインストールされていることを確認します。次のコマンドを実行して、インストールされているかどうかを確認できます。

node -v
npm -v

次に、npm install create-react-app を使用して新しい React プロジェクトを作成します。次のコマンドを実行します:

npx create-react-app my-app
cd my-app
npm start

操作が成功すると、開発サーバーがローカルで起動され、React アプリケーションがブラウザで開きます。

2. MongoDB データベースへの接続
React アプリケーションでデータベースを使用する前に、MongoDB に接続する必要があります。まず、MongoDB がインストールされており、MongoDB サービスが開始されていることを確認します。

次に、データベースを操作するための便利な API を提供する MongoDB の Node.js ドライバーとして Mongoose を使用します。次のコマンドを使用して Mongoose をインストールします:

npm install mongoose

React アプリケーションの src ディレクトリに db.js という名前のファイルを作成し、次のコードを追加します:

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my_database', { useNewUrlParser: true });

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Database connected!');
});

3. データ モデルを作成します
データベースに接続した後、データ モデルを定義する必要があります。 React アプリケーションの src ディレクトリに models という名前のフォルダーを作成し、その中に user.js という名前のファイルを作成します。次のコードを user.js ファイルに追加します:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  age: Number,
  email: String,
});

const User = mongoose.model('User', userSchema);

module.exports = User;

4. React コンポーネントの作成
次に、データベース内のデータを表示および操作するための React コンポーネントを作成します。 React アプリケーションの src ディレクトリに、components という名前のフォルダーを作成し、その中に UserList.js という名前のファイルを作成し、次のコードを追加します。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('/users').then((response) => {
      setUsers(response.data);
    });
  }, []);

  return (
    <div>
      <h1 id="User-List">User List</h1>
      {users.map((user) => (
        <div key={user._id}>
          <p>Name: {user.name}</p>
          <p>Age: {user.age}</p>
          <p>Email: {user.email}</p>
        </div>
      ))}
    </div>
  );
};

export default UserList;

上記のコードでは、axios ライブラリを使用します。 GET リクエストを実行してデータベース内のユーザー データを取得し、useState と useEffect を使用してユーザー データの状態を管理および更新します。

次に、App.js ファイルの UserList コンポーネントを使用します:

import React from 'react';
import UserList from './components/UserList';

const App = () => {
  return (
    <div>
      <UserList />
    </div>
  );
};

export default App;

5. アプリケーションを開始します
これで、データベースに接続し、ユーザーを表示する React コンポーネントを作成しました。データ。次のコマンドを実行して React アプリケーションを開始します。

npm start

ブラウザを開くと、http://localhost:3000 アドレスでアプリケーションが正常に開始され、データベース内のユーザー データが保存されていることがわかります。表示されます。

6. アプリケーションの拡張機能
上記の基本アプリケーションをベースに、フォームを追加することでユーザーの追加や編集も行うことができます。 UserList.js コンポーネントに次のコードを追加します。

const [name, setName] = useState('');
const [age, setAge] = useState('');
const [email, setEmail] = useState('');

const addUser = () => {
  axios.post('/users', { name, age, email }).then((response) => {
    setUsers([...users, response.data]);
  });
};

render メソッドで、ユーザー情報を入力するフォームを追加し、addUser メソッドを呼び出して新しいユーザーを追加します。

同様のコードを追加することで、ユーザーの編集や削除の機能も実装できます。

7. 概要
この記事では、React と MongoDB を使用してスケーラブルなデータベース アプリケーションを構築する方法を紹介します。まずMongooseを通じてMongoDBに接続し、データモデルを定義し、Reactを使ってデータを表示・操作するコンポーネントを記述します。示されているコード例を通じて、React アプリケーションで MongoDB を使用する方法を深く理解できます。この記事がスケーラブルなデータベース アプリケーションの構築に役立つことを願っています。

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