如何将ReactJS与MySQL后端连接？是否需搭配Express框架？

Hey there! Since you’re familiar with Django and new to setting up a backend for your React app, let’s break down your questions clearly:

Can React frontend communicate with a "React backend"? #

First, a quick clarification: React itself is a frontend library—it doesn’t have built-in backend capabilities. When people mention a "React backend," they usually mean a backend built with Node.js (the JavaScript runtime React relies on) paired with tools like Express.

That said: Yes! Your React frontend can absolutely communicate with a Node.js/Express backend (even if you use React for the frontend). The process is similar to connecting a React frontend to a Django backend—you’ll use HTTP requests (like fetch or axios) from your React components to call API endpoints on your Node.js backend.

Better approaches for building APIs with MySQL #

Your current raw mysql module code works for simple queries, but it’s low-level and will get messy as your app scales. Here are two better options, especially if you’re used to Django’s ORM:

1. Use an ORM (like Sequelize) #

Sequelize is a popular Node.js ORM for relational databases (including MySQL), and it functions much like Django’s ORM. It lets you define models, handle migrations, and run database operations with clean, readable code instead of writing raw SQL.

Example Sequelize setup:

// Install dependencies first: npm install sequelize mysql2
const { Sequelize, Model, DataTypes } = require('sequelize');

// Initialize database connection
const sequelize = new Sequelize('my_db', 'your_username', 'your_password', {
  host: 'localhost',
  dialect: 'mysql'
});

// Define a model (similar to Django's Model class)
class YourDataModel extends Model {}
YourDataModel.init({
  _data: DataTypes.STRING
}, { sequelize, modelName: 'your_data' });

// Fetch data with ORM (cleaner than raw SQL)
async function fetchSolution() {
  try {
    const result = await YourDataModel.findOne({ attributes: ['_data'], raw: true });
    console.log('The solution is:', result._data);
  } catch (err) {
    console.error('Error fetching data:', err);
  }
}

fetchSolution();

2. Use Prisma (modern ORM alternative) #

Prisma is a newer, streamlined ORM with an intuitive schema builder and auto-generated query tools. It’s great if you want even less boilerplate than Sequelize and a smoother developer experience.

Should you use ExpressJS? #

Absolutely! Express is the most widely used lightweight framework for building Node.js backends. Think of it like Django’s URLconf plus view layer—Express lets you define routes, handle HTTP requests/responses, and use middleware (for CORS, JSON parsing, authentication, etc.) with minimal boilerplate.

Here’s a quick example of an Express backend with a MySQL API endpoint (using Sequelize):

// Install dependencies: npm install express cors
const express = require('express');
const cors = require('cors');
const { sequelize, YourDataModel } = require('./your-sequelize-setup');

const app = express();
app.use(cors()); // Allow cross-origin requests from your React frontend
app.use(express.json()); // Parse JSON request bodies

// Define an API endpoint (similar to a Django view)
app.get('/api/solution', async (req, res) => {
  try {
    const result = await YourDataModel.findOne({ attributes: ['_data'], raw: true });
    res.json({ solution: result._data });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// Start the server
const PORT = 5000;
app.listen(PORT, async () => {
  await sequelize.authenticate(); // Verify database connection
  console.log(`Server running on port ${PORT}`);
});

Then, in your React frontend, call this endpoint with fetch:

// Inside a React component
async function getSolution() {
  const response = await fetch('http://localhost:5000/api/solution');
  const data = await response.json();
  console.log('Fetched solution:', data.solution);
}

Final thoughts #

Since you know Django, you’ll find Express + Sequelize/Prisma feels familiar in many ways—you’re just adapting to JavaScript syntax instead of Python. This stack will let you build a robust backend that integrates seamlessly with your React frontend.

内容的提问来源于stack exchange，提问作者Mohammed Mohideen M Z