React vite CRUD basics

CodeForLife — Thu, 21 May 2026 20:09:18 +0000

Simple localised react crud
npm create vite@latest
npm i bootstrap axios

App.jsx

import TableBody from "./Table/TableBody";
import "./App.css";
import ButtonDelete from "./Button/ButtonDelete";
import TableRow from "./Table/TableRow";
import UserForm from "./UserForm";

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

export const fetchData = createContext();

function App() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  async function getData() {
    try {
      const result = await axios.get("http://localhost:3001/api/users");
      setUsers(result.data);
      setError(null);
    } catch (error) {
      console.error(error);
      setError("Hiba az adat lekérésekor");
    }
  }

  useEffect(() => {
    getData();
  }, []);

  return (
    <>
      <div className="container">
        <div className="row">
          <h1 className="fw-bold text-center mt-5">
            {" "}
            Felhasználókezelő (Full-Stack CRUD)
          </h1>
          <fetchData.Provider value={{ getData, setError }}>
            <UserForm />
            <hr className="mt-4" />
            <h3 className="text-center mt-3 mb-4">Felhasználók Listája</h3>

            {error ? (
              <h1 className="text-center text-danger">{error}</h1>
            ) : (
              <TableBody users={users} />
            )}

          </fetchData.Provider>
        </div>
      </div>
    </>
  );
}

export default App;

TableBody.jsx

import TableRow from "./TableRow";

function TableBody({ users }) {
  return (
    <>
      <table className="table table-bordered table-dark border-light">
        <thead className="table-light border-dark">
          <tr>
            <th>#ID</th>
            <th>Név </th>
            <th>Email</th>
            <th>Regisztráció</th>
            <th>Műveletek</th>
          </tr>
        </thead>
        <tbody>
          {users.length > 0 ? (
            users.map((user) => (
              <TableRow key={user.id} data={user} />
            ))
          ) : (
            <tr>
              <td colSpan="5" className="no-users-cell">
                Nincsenek felhasználók az adatbázisban.
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </>
  );
}
export default TableBody;

TableRow.jsx

import { useEffect, useState, useContext } from "react";
import ButtonDelete from "../Button/ButtonDelete";
import { fetchData } from "../App";
import axios from "axios";

function TableRow({ data }) {
  const [editStart, setEditStart] = useState(false);

  const [editName, setEditName] = useState(data.name);
  const [editEmail, setEditEmail] = useState(data.email);

  const { getData, setError } = useContext(fetchData);

  function saveEdit() {
    onUpdate(data.id, editName, editEmail);
    setEditStart(false);
  }

  async function onUpdate(id, name, email) {
    try {
      await axios.patch("http://localhost:3001/api/users/" + id, { name,email });
      setError(null);
      getData();
    } catch (error) {
      console.error(error);
      setError("Hiba az adat Frissítésénél");
    }
  }

  const editView = (
    <>
      <tr className="align-middle">
        <td>{data.id}</td>
        <td>
          <input type="text" value={editName} onChange={(event) => setEditName(event.target.value)}/>
        </td>
        <td>
          <input
            type="text"
            value={editEmail}
            onChange={(e) => setEditEmail(e.target.value)}
          />
        </td>
        <td>{new Date(data.created_at).toLocaleDateString()}</td>
        <td>
          <button
            className="btn btn-success fw-bold me-2"
            onClick={() => saveEdit()}
          >
            Mentés
          </button>
          <button
            className="btn btn-danger fw-bold"
            onClick={() => setEditStart(false)}
          >
            Mégsem
          </button>
        </td>
      </tr>
    </>
  );

  const normalView = (
    <>
      <tr className="align-middle">
        <td>{data.id}</td>
        <td>{data.name}</td>
        <td>{data.email}</td>
        <td>{new Date(data.created_at).toLocaleDateString()}</td>
        <td>
          <button className="btn btn-primary fw-bold me-2" onClick={() => setEditStart(true)}>
            Szerkesztés
          </button>
          <ButtonDelete id={data.id} />
        </td>
      </tr>
    </>
  );

  return (
    editStart? editView : normalView
  );
}


export default TableRow;

ButtonDelete.jsx

import { fetchData } from "../App";
import { useContext } from "react";
import axios from "axios";

function ButtonDelete({ id }) {
  const { getData, setError } = useContext(fetchData);

  async function onDelete(id) {
    if (
      !window.confirm(
        `Biztosan törölni szeretnéd a(z) ${id} ID-jű felhasználót?`,
      )
    ) {return;}

    try {
      await axios.delete("http://localhost:3001/api/users/" + id);
      setError(null);
      getData();
    } catch (error) {
      console.error(error);
      setError("Hiba az adat Törlésénél");
    }
  }

  return (
    <>
      <button className="btn btn-danger fw-bold" onClick={() => onDelete(id)}>
        Törlés
      </button>
    </>
  );
}
export default ButtonDelete;

Node.Js Express CRUD template

CodeForLife — Thu, 21 May 2026 15:52:27 +0000

This post is a guidance for very beginners about a Node.js express code with mysql2 which shows some examples for CRUD in Node.js

package.json:

  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },

server.js

//npm init
//npm install nodemon mysql2 express cors


const express = require('express');
const mysql = require('mysql2/promise');
const cors = require('cors');

const app = express();

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

const dbPool = mysql.createPool({
    host: 'localhost',     
    user: 'root',         
    password:  '',
    database: 'database_name', 
    port: 3306,         
});


app.get('/', (req, res) => {
  res.send('Backend running');
});



// -------------- CRUD --------------

// CREATE
app.post('/api/users', async (req, res) => {
    try {
        const { name, email } = req.body;

        if (!name || !email) {
            return res.status(400).json({ error: 'Error for the frontend (name or email missing)' });
        }

        const sql = "INSERT INTO users (name, email) VALUES (?, ?)";
        const [result] = await dbPool.query(sql, [name, email]);
        res.status(201).json({ message: "Response for the frontend", id: result.insertId });
    } catch (error) {
        console.error("Error for the backend ", error);
        res.status(500).json({ error: 'Error for the frontend' });
    }
});

// READ 
app.get('/api/users', async (req, res) => {
    try {
        const sql = "SELECT id, name, email FROM users";
        const [result] = await dbPool.query(sqlQuery);
        res.json(result);
    } catch (error) {
        console.error("Error for the backend ", error);
        res.status(500).json({ error: 'Error for the frontend' });
    }
});


// UPDATE
app.patch('/api/users/:id', async (req, res) => {
    try {
        const { id } = req.params;
        const { name, email } = req.body;

        if (!name || !email) {
             return res.status(400).json({ error: 'Error for the frontend (name or email missing)' });
        }

        const sql = "UPDATE users SET name = ?, email = ? WHERE id = ?";
        const [result] = await dbPool.query(sql, [name, email, id]);

         res.status(201).json({ message: "Response for the frontend", id: result.insertId });
    } catch (error) {
        console.error("Error for the backend ", error);
        res.status(500).json({ error: 'Error for the frontend' });
    }
});

// DELETE 
app.delete('/api/users/:id', async (req, res) => {
    try {
        const { id } = req.params;
        const sql = "DELETE FROM users WHERE id = ?";
        const [result] = await dbPool.query(sql, [id]);

       res.status(201).json({ message: "Response for the frontend", id: result.insertId });
    } catch (error) {
        console.error("Error for the backend ", error);
        res.status(500).json({ error: 'Error for the frontend' });
    }
});

const PORT = 3001;

app.listen(PORT, () => {
  console.log('Server is running on: http://localhost:'+PORT);
});

DEV Community: CodeForLife

React vite CRUD basics

Node.Js Express CRUD template