How to build reliable database applications with React and MySQL

How to use React and MySQL to build reliable database applications

In today's era of digital intelligence, database applications have become a key component in various fields. Building a reliable database application requires choosing an appropriate technology stack and effectively collaborating between the front and back ends. This article will introduce how to build a reliable database application using React and MySQL, and provide some specific code examples.

1. Technology Selection
When building a database application, it is crucial to choose a technology that suits the needs of developers and projects. React is a popular JavaScript library that is widely used for building user interfaces. Its componentization, virtual DOM and other features allow developers to quickly build highly interactive interfaces. MySQL is a mature relational database management system with high stability and reliability.

2. Project preparation

1. Install React: Execute the following command in the root directory of the project to install React:

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

2. Install MySQL : Installing MySQL will vary depending on the operating system. You can install and configure it according to the official documentation (https://dev.mysql.com/doc/).

3. Database connection
In the React project, we can use a third-party library to connect to the MySQL database. A commonly used library is mysql, which can be installed through the following command:

npm install mysql

In the root directory of the React project, we can create a new db.js file with Configuration of database connection:

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;

In the above code, we use the createConnection method to create a database connection, and judge the connection status in the connect callback function .

4. Query data
In the src folder of the React project, we can create a new UserList.js file to display the user list:

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;

In the above code, we use two React Hooks, useState and useEffect, to manage status and send asynchronous requests. In the callback function of useEffect, we execute the database query through the query method and set the query results to the users status.

5. Insert data
Still in the UserList.js file, we can add a new function to handle the user's insertion operation:

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 }]);
      }
    });
  }
}

In the above code , we used the prompt method to pop up a prompt box asking the user to enter a name. Then, we use the INSERT INTO statement to insert user data into the database and update the users status through the setUsers method.

6. Summary
Through the combination of React and MySQL, we can build a reliable database application. This article introduces how to set up the environment, connect to the database, query data, insert data and other operations, and provides corresponding code examples. I hope this article can help readers apply React and MySQL in actual projects to build reliable database applications.

The above is the detailed content of How to build reliable database applications with React and MySQL. For more information, please follow other related articles on the PHP Chinese website!