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

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

今日のデジタル インテリジェンスの時代において、データベース アプリケーションはさまざまな分野で重要なコンポーネントとなっています。信頼性の高いデータベース アプリケーションを構築するには、適切なテクノロジ スタックを選択し、フロント エンドとバック エンドの間で効果的に連携する必要があります。この記事では、React と MySQL を使用して信頼性の高いデータベース アプリケーションを構築する方法を紹介し、いくつかの具体的なコード例を示します。

1. テクノロジーの選択
データベース アプリケーションを構築する場合、開発者やプロジェクトのニーズに合ったテクノロジーを選択することが重要です。 React は、ユーザー インターフェイスの構築に広く使用されている人気のある JavaScript ライブラリです。そのコンポーネント化、仮想 DOM、およびその他の機能により、開発者は高度にインタラクティブなインターフェイスを迅速に構築できます。 MySQL は、高い安定性と信頼性を備えた成熟したリレーショナル データベース管理システムです。

2. プロジェクトの準備

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

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

2. MySQL のインストール : MySQL のインストールはオペレーティング システムによって異なります。公式ドキュメント (https://dev.mysql.com/doc/) に従ってインストールおよび設定できます。

3. データベース接続
React プロジェクトでは、サードパーティのライブラリを使用して MySQL データベースに接続できます。一般的に使用されるライブラリは mysql で、次のコマンドでインストールできます:

npm install mysql

React プロジェクトのルート ディレクトリに、新しい db.js# を作成できます。 ## データベース接続の構成を含むファイル:

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'test',
});

connection.connect((err) => {
  if (err) {
    console.error('Error connecting to database: ', err);
  } else {
    console.log('Connected to database successfully');
  }
});

module.exports = connection;

上記のコードでは、

createConnection メソッドを使用してデータベース接続を作成し、connect# で接続ステータスを判断します。 ## コールバック関数 。 4. データのクエリ

React プロジェクトの

src
フォルダーに、ユーザー リストを表示するための新しい UserList.js ファイルを作成できます。 # #

import React, { useState, useEffect } from 'react';
import db from './db';

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

  useEffect(() => {
    db.query('SELECT * FROM users', (err, results) => {
      if (err) {
        console.error('Error executing query: ', err);
      } else {
        setUsers(results);
      }
    });
  }, []);

  return (
    <div>
      <h1 id="User-List">User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

上記のコードでは、2 つの React フック、useState

と

useEffect を使用してステータスを管理し、非同期リクエストを送信します。 useEffect のコールバック関数では、query メソッドを通じてデータベース クエリを実行し、クエリ結果を users ステータスに設定します。 5. データの挿入

UserList.js

ファイル内に、ユーザーの挿入操作を処理する新しい関数を追加できます:

function insertUser() {
  const name = prompt('Please enter a name');

  if (name) {
    db.query('INSERT INTO users (name) VALUES (?)', [name], (err, results) => {
      if (err) {
        console.error('Error executing query: ', err);
      } else {
        alert('User inserted successfully');
        setUsers([...users, { id: results.insertId, name }]);
      }
    });
  }
}

上記ではコードでは、prompt メソッドを使用して、ユーザーに名前の入力を求めるプロンプト ボックスをポップアップ表示しました。次に、

INSERT INTO ステートメントを使用してユーザー データをデータベースに挿入し、setUsers メソッドを通じて users ステータスを更新します。 6. まとめ React と MySQL を組み合わせることで、信頼性の高いデータベース アプリケーションを構築できます。この記事では、環境のセットアップ、データベースへの接続、データのクエリ、データの挿入およびその他の操作の方法を紹介し、対応するコード例を示します。この記事が、読者が React と MySQL を実際のプロジェクトに適用して信頼性の高いデータベース アプリケーションを構築するのに役立つことを願っています。

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