很遗憾，React不能在前端直接连接数据库。必须通过后端服务器实现数据库连接、查询和添加数据等操作。因此，我们需要一个后端服务器来处理这些操作，并通过API将数据返回给React前端。以下是基于Node.js和Express的代码示例：

首先，我们需要下载MySQL Node.js包，可以使用以下命令：

npm install mysql

接下来，在你的Express服务器文件中添加以下代码：

const mysql = require('mysql');
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.json());

// 连接MySQL数据库
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'your_mysql_username',
    password: 'your_mysql_password',
    database: 'your_database_name'
});

// 处理GET请求，查询数据库中所有的数据
app.get('/data', (req, res) => {
    connection.query('SELECT * FROM your_table_name', (error, results, fields) => {
        if (error) throw error;
        res.send(results);
    });
});

// 处理POST请求，向数据库中添加数据
app.post('/data', (req, res) => {
    const {data} = req.body; // 假设请求中包含了一个名为data的字段
    connection.query('INSERT INTO your_table_name SET ?', data, (error, results, fields) => {
        if (error) throw error;
        res.send('Data added successfully!');
    });
});

// 监听端口
app.listen(5000, () => {
    console.log('Server is listening on port 5000!');
});

接下来，在你的React前端文件中，使用Fetch API来调用后端API，并将数据显示在界面上。以下是代码示例：

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

function App() {
    const [data, setData] = useState([]);

    // GET请求，获取数据
    useEffect(() => {
        fetch('/data')
            .then(res => res.json())
            .then(data