React Node MYSQL XAMPP CRUD Example

🚀 React + Node + MySQL CRUD App using XAMPP (Step-by-Step Guide)

This tutorial will help you build a simple CRUD (Create, Read, Update, Delete) application using:

• Frontend: React
• Backend: Node.js + Express
• Database: MySQL via XAMPP

✅ Prerequisites

• Node.js and npm installed
• XAMPP installed and MySQL running
• Basic understanding of React and SQL

📁 Folder Structure

my-crud-app/
├── backend/        # Node.js + Express + MySQL
├── frontend/       # React App

Step 1️⃣: Start MySQL using XAMPP

• Open XAMPP Control Panel
• Start Apache (optional) and MySQL
• Go to phpMyAdmin

Step 2️⃣: Create the Database and Table

CREATE DATABASE react_crud;

CREATE TABLE crudusers (

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

Step 3️⃣: Set Up Backend (Node + Express + MySQL)

🔧 Initialize the backend

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

📄 Create db.js for MySQL connection

const mysql = require('mysql');
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'react_crud'
});
db.connect(err => {
  if (err) throw err;
  console.log('MySQL connected');
});
module.exports = db;

📄 Create index.js  for backend server

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const db = require('./db');
const app = express();

app.use(cors());
app.use(bodyParser.json());

// CREATE
app.post('/crudusers', (req, res) => {
  const { name, email } = req.body;
  db.query('INSERT INTO crudusers (name, email) VALUES (?, ?)', [name, email], (err) => {

    if (err) return res.send(err);
    res.send('User added');
  });
});

// READ
app.get('/crudusers', (req, res) => {

  db.query('SELECT * FROM crudusers', (err, results) => {

    if (err) return res.send(err);
    res.json(results);
  });
});

// UPDATE
app.put('/users/:id', (req, res) => {
  const { name, email } = req.body;
  db.query('UPDATE crudusers SET name=?, email=? WHERE id=?', [name, email, req.params.id], (err) => {

    if (err) return res.send(err);
    res.send('User updated');
  });
});

// DELETE
app.delete('/users/:id', (req, res) => {
  db.query('DELETE FROM crudusers WHERE id=?', [req.params.id], (err) => {

    if (err) return res.send(err);
    res.send('User deleted');
  });
});

app.listen(5000, () => console.log('Server running on port 5000'));

---