When developing modern web applications, React stands out as a leading choice for crafting dynamic user interfaces. However, as a client-side library, React cannot directly communicate with server-side databases like MySQL. To bridge this essential gap, a backend server is indispensable, acting as an intermediary to handle data interactions.

This comprehensive guide will walk you through the process of connecting your React frontend to a MySQL database, utilizing a Node.js and Express backend. By the end, you’ll have a clear understanding of the architecture and practical steps to implement this common web development pattern.

🔹 Step 1: Set Up Your MySQL Database

Our initial step involves preparing the MySQL database. You’ll need to create a new database and a table within it to store your application’s data. For this example, we’ll create a database named myapp and a users table.

Here’s the SQL script to get started:

CREATE DATABASE myapp;
USE myapp;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);

🔹 Step 2: Build Your Backend with Node.js and Express

With your MySQL database ready, the next crucial step is to build the backend API using Node.js and the Express framework. This backend will handle requests from the React frontend and interact with the MySQL database.

First, create a new directory for your backend project, navigate into it, and initialize a new Node.js project. Then, install the necessary dependencies: express for the web framework, mysql for database connectivity, and cors to enable cross-origin resource sharing, which is vital for communication between your frontend and backend.

mkdir backend
cd backend
npm init -y
npm install express mysql cors

Next, create an index.js file within your backend directory. This file will contain all the server logic, including the MySQL database connection, API routes for fetching users, and an endpoint for adding new users.

const express = require("express");
const mysql = require("mysql");
const cors = require("cors");

const app = express();
app.use(cors());
app.use(express.json());

// MySQL connection details
const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "myapp",
});

db.connect(err => {
  if (err) {
    console.log("MySQL Connection Error:", err);
  } else {
    console.log("MySQL Connected!");
  }
});

// API endpoint to get all users
app.get("/users", (req, res) => {
  db.query("SELECT * FROM users", (err, result) => {
    if (err) return res.json({ error: err });
    res.json(result);
  });
});

// API endpoint to insert a new user
app.post("/users", (req, res) => {
  const { name, email } = req.body;
  db.query("INSERT INTO users (name, email) VALUES (?, ?)", [name, email], (err, result) => {
    if (err) return res.json({ error: err });
    res.json({ message: "User added successfully" });
  });
});

// Start the server
app.listen(5000, () => {
  console.log("Server running on port 5000");
});

To start your backend server, run the following command in your backend directory:

node index.js

You should see “MySQL Connected!” and “Server running on port 5000” in your console.

🔹 Step 3: Connect Your React Frontend to the Backend

Finally, we’ll create our React application and establish communication with the Node.js/Express backend. This frontend will be responsible for displaying data fetched from the backend and sending new data to it.

First, create a new React application and install axios, a popular promise-based HTTP client for making API requests.

npx create-react-app frontend
cd frontend
npm install axios

Now, open the src/App.js file in your frontend directory and replace its content with the following code. This React component will fetch existing users when it mounts and provide an input form to add new users, all by interacting with your backend API.

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

function App() {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  // Fetch users when the component mounts
  useEffect(() => {
    axios.get("http://localhost:5000/users")
      .then(res => setUsers(res.data))
      .catch(err => console.log(err));
  }, []);

  // Function to add a new user
  const addUser = () => {
    axios.post("http://localhost:5000/users", { name, email })
      .then(res => {
        alert(res.data.message);
        setUsers([...users, { name, email }]); // Optimistically update the UI
        setName(''); // Clear input fields
        setEmail('');
      })
      .catch(err => console.log(err));
  };

  return (
    <div>
      <h1>React + MySQL Example</h1>
      <input 
        type="text" 
        placeholder="Name" 
        value={name}
        onChange={e => setName(e.target.value)} 
      />
      <input 
        type="text" 
        placeholder="Email" 
        value={email}
        onChange={e => setEmail(e.target.value)} 
      />
      <button onClick={addUser}>Add User</button>

      <h2>Users:</h2>
      <ul>
        {users.map((user, i) => (
          <li key={i}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Start your React development server in the frontend directory:

npm start

Your browser should open to `http://localhost:3000`, displaying your React app fetching and adding users via the Node.js backend.

✅ Conclusion

Congratulations! You have successfully established a functional connection between your React frontend and a MySQL database via a Node.js and Express backend. This foundational architecture is a cornerstone of many modern web applications, demonstrating the seamless flow of data: Your React application communicates with the Node.js/Express server, which in turn manages all interactions with the MySQL database.

The data flow can be summarized as:
👉 React (Frontend) → Node.js/Express (Backend) → MySQL (Database)

This robust setup can be further enhanced with features like user authentication, advanced data validation, and more intricate database operations to build powerful web applications.

⚡ Pro Tip

While this guide focused on Node.js and Express, remember that the backend layer is highly flexible. You could seamlessly substitute Node.js with other powerful server-side languages and frameworks such as PHP (e.g., Laravel), Python (e.g., Django, Flask), or Ruby (e.g., Ruby on Rails). The fundamental principle remains consistent: React serves as the client, communicating with your chosen backend, which then manages all interactions with the MySQL database.