React と MySQL を使用して信頼性の高いデータベースアプリケーションを構築する方法-jsチュートリアル-php.cn

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

PHPz

リリース： 2023-09-26 15:01:10

オリジナル

897 人が閲覧しました

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

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

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

2. プロジェクトの準備

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

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

ログイン後にコピー

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