DEV Community: Nahid TD

How to Connect React with MySQL (Step by Step Guide)

Nahid TD — Tue, 16 Sep 2025 11:38:43 +0000

When building modern web applications, React is one of the most popular choices for the frontend. But React alone cannot directly communicate with a database like MySQL because it’s just a frontend library (running on the client-side).

To connect React with MySQL, we need a backend server (for example, Node.js/Express, PHP, or Python). In this guide, we’ll use Node.js + Express as the backend and show you how React can interact with MySQL.

🔹 Step 1: Setup MySQL Database

First, create a database and table in MySQL:

CREATE DATABASE myapp;
USE myapp;

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

🔹 Step 2: Build Backend with Node.js + Express

Create a new backend project:

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

Now create a file index.js:

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

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

// MySQL connection
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!");
  }
});

// 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);
  });
});

// Insert 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" });
  });
});

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

Run the backend:

node index.js

🔹 Step 3: Connect React with Backend

Now, let’s create a React app:

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

In App.js:

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

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

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

  const addUser = () => {
    axios.post("http://localhost:5000/users", { name, email })
      .then(res => {
        alert(res.data.message);
        setUsers([...users, { name, email }]);
      })
      .catch(err => console.log(err));
  };

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

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

export default App;

✅ Conclusion

That’s it! 🎉 Now your React app can send and receive data from MySQL using a Node.js + Express backend.

Flow:
👉 React (frontend) → Node.js/Express (backend) → MySQL (database).

This setup is widely used in real-world applications and can be extended with authentication, validation, and advanced queries.

⚡ Pro Tip: You can also use PHP or Python instead of Node.js as the backend. The core idea is the same: React talks to the backend, and the backend talks to MySQL.

To create and securely manage an API key for a project from Nahid HK's GitHub repositories, follow these steps

Nahid TD — Sat, 25 Jan 2025 17:29:36 +0000

To create and securely manage an API key for a project from Nahid HK's GitHub repositories, follow these steps:

Obtain the API Key:
- Visit the project's website, such as landingcode.bmhm.sbs, and sign up to receive your unique API key.

Clone the Repository:

Open your terminal and run:

 git clone https://github.com/nahidhk/landingCode.git
 cd landingCode

Install Dependencies:
- Ensure you have Node.js installed. Then, install the necessary packages:
```
 npm install
```
Configure the API Key:
- Create a config.js file in the project's root directory and add your API key:
```
 // config.js
 const API_KEY = 'YOUR_API_KEY_HERE';
```

To prevent this file from being tracked by Git (and thus exposed publicly), add config.js to your .gitignore file:
```
 # .gitignore
 config.js
```
This ensures that your API key remains private and isn't pushed to public repositories. (Stack Overflow)

Use the API Key in Your Application:

In your JavaScript files, import the config.js file and utilize the API_KEY variable as needed:

 // main.js
 import { API_KEY } from './config.js';

 function fetchData() {
   const url = `https://api.example.com/data?api_key=${API_KEY}`;
   // Fetch data using the API key
 }

Deploying Your Application:
- When deploying your application (e.g., using GitHub Pages or Netlify), ensure that your build process includes the config.js file without exposing it in your version control system. This might involve setting up environment variables or serverless functions, depending on your hosting platform. (reddit.com)

By following these steps, you can securely manage and utilize API keys in your JavaScript applications, ensuring that sensitive information remains protected.

To create or extend an Invoice App using PHP and MySQL, and integrate your GitHub repository, follow these steps ?

Nahid TD — Mon, 13 Jan 2025 10:20:09 +0000

To create or extend an Invoice App using PHP and MySQL, and integrate your GitHub repository, follow these steps:

1. Clone the Repository

Open a terminal or command prompt and clone your GitHub repository:

   git clone https://github.com/nahidhk/invoice-app

Navigate into the project directory:

   cd invoice-app

2. Set Up the Environment

Install a Local Development Server:
- Use tools like XAMPP, WAMP, or MAMP to run a local PHP environment.
Configure the Database:
- Create a new database in MySQL, for example, invoice_app.
- Import any existing SQL schema or data provided in your repository (look for .sql files).
```
 mysql -u username -p invoice_app < path/to/dump.sql
```

Configure Database Credentials:

Open the database configuration file in the project (usually config.php, .env, or a similar file).
Update the database credentials:

 <?php
 define('DB_HOST', 'localhost');
 define('DB_USER', 'your_username');
 define('DB_PASS', 'your_password');
 define('DB_NAME', 'invoice_app');
 ?>

3. Structure of the Invoice App

A typical invoice app might include the following features:

Dashboard: Overview of invoices, payments, and statistics.
Invoices: CRUD operations (Create, Read, Update, Delete) for invoices.
Clients: Manage clients and their details.
Reports: Generate financial reports.

Ensure the repository has a clear folder structure, such as:

/invoice-app/
├── index.php        # Entry point
├── config.php       # Database configuration
├── db.php           # Database connection
├── assets/          # CSS, JS, images
├── templates/       # HTML templates
├── modules/         # Invoice, Client, etc.
│   ├── invoices.php
│   └── clients.php
└── sql/             # SQL scripts for setup

4. Develop Features

A. Invoice Creation

Database Table: Create a table for invoices if it doesn't already exist.

   CREATE TABLE invoices (
       id INT AUTO_INCREMENT PRIMARY KEY,
       client_id INT,
       invoice_number VARCHAR(50),
       date DATE,
       total DECIMAL(10, 2),
       status ENUM('paid', 'unpaid') DEFAULT 'unpaid',
       FOREIGN KEY (client_id) REFERENCES clients(id)
   );

Backend Logic (PHP): Add a PHP function to create a new invoice:

   function createInvoice($client_id, $invoice_number, $date, $total) {
       global $pdo;
       $sql = "INSERT INTO invoices (client_id, invoice_number, date, total) VALUES (?, ?, ?, ?)";
       $stmt = $pdo->prepare($sql);
       $stmt->execute([$client_id, $invoice_number, $date, $total]);
       return $pdo->lastInsertId();
   }

Frontend Form: Add an HTML form for creating invoices.

   <form action="create_invoice.php" method="POST">
       <label for="client_id">Client:</label>
       <select name="client_id">
           <!-- Populate with clients from the database -->
       </select>
       <label for="invoice_number">Invoice Number:</label>
       <input type="text" name="invoice_number" required>
       <label for="date">Date:</label>
       <input type="date" name="date" required>
       <label for="total">Total:</label>
       <input type="number" name="total" step="0.01" required>
       <button type="submit">Create Invoice</button>
   </form>

B. List and Manage Invoices

Backend Query: Fetch all invoices from the database.

   function getInvoices() {
       global $pdo;
       $sql = "SELECT * FROM invoices";
       $stmt = $pdo->query($sql);
       return $stmt->fetchAll(PDO::FETCH_ASSOC);
   }

Frontend Display: Display invoices in a table format.

   <table>
       <thead>
           <tr>
               <th>ID</th>
               <th>Client</th>
               <th>Invoice Number</th>
               <th>Date</th>
               <th>Total</th>
               <th>Status</th>
               <th>Actions</th>
           </tr>
       </thead>
       <tbody>
           <?php foreach ($invoices as $invoice): ?>
           <tr>
               <td><?= $invoice['id'] ?></td>
               <td><?= $invoice['client_id'] ?></td>
               <td><?= $invoice['invoice_number'] ?></td>
               <td><?= $invoice['date'] ?></td>
               <td><?= $invoice['total'] ?></td>
               <td><?= $invoice['status'] ?></td>
               <td>
                   <a href="edit_invoice.php?id=<?= $invoice['id'] ?>">Edit</a>
                   <a href="delete_invoice.php?id=<?= $invoice['id'] ?>">Delete</a>
               </td>
           </tr>
           <?php endforeach; ?>
       </tbody>
   </table>

C. Client Management

Create a similar workflow for clients:
- Add clients to the database.
- Fetch and display clients.

5. Testing

Run Locally:
- Start your PHP server:
```
 php -S localhost:8000
```

Open the app in your browser: http://localhost:8000.

Test Key Features:
- Create invoices.
- View, edit, and delete invoices.
- Manage clients.

6. Push Updates to GitHub

Add new changes:

   git add .
   git commit -m "Added invoice creation and management features"
   git push origin main

7. Deploy the App

Deploy the app on a server (e.g., cPanel, AWS, DigitalOcean, etc.).
Set up the MySQL database on the server.
Update your database credentials in the deployed app.

By following this guide, you’ll enhance the functionality of your invoice app, integrate it with MySQL, and ensure it's functional for end-users. Let me know if you need help with specific parts!

How to develop Public APIs in use PHP ?

Nahid TD — Sun, 12 Jan 2025 16:14:26 +0000

Developing public APIs using PHP involves setting up a server-side application that receives HTTP requests, processes them, and sends back responses in a structured format like JSON or XML. Below is a step-by-step guide:

1. Set Up Your Environment

Install PHP and a Web Server:
- Use a web server like Apache or Nginx. Install them locally or on a hosting platform.
- Alternatively, use tools like XAMPP, WAMP, or MAMP for local development.
Install a Database (Optional):
- If your API interacts with a database, install MySQL or any other database you plan to use.

2. Design the API

Define the Purpose:
- Determine what the API will do and what resources it will expose.
- For example: CRUD operations on a "users" resource.
Decide on Endpoints:
- Define the routes (URLs) and HTTP methods (GET, POST, PUT, DELETE) for each resource.

Example:

   GET    /api/users       → Get a list of users
   GET    /api/users/{id}  → Get a specific user
   POST   /api/users       → Create a new user
   PUT    /api/users/{id}  → Update a user
   DELETE /api/users/{id}  → Delete a user

Define the Data Format:
- Typically, APIs return data in JSON or XML format. JSON is the most common choice.

3. Build the API Using PHP

Create the Project Structure:

   /api/
   ├── index.php        # Main API entry point
   ├── config.php       # Database configuration
   ├── db.php           # Database connection logic
   ├── routes/          # Route handlers
   │   ├── users.php
   └── utils/           # Utility functions
       └── response.php

Set Up Database Connection:

   // db.php
   <?php
   $host = 'localhost';
   $dbname = 'your_database';
   $username = 'your_username';
   $password = 'your_password';

   try {
       $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
       $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   } catch (PDOException $e) {
       die("Database connection failed: " . $e->getMessage());
   }
   ?>

Create a Response Helper:

   // utils/response.php
   <?php
   function sendResponse($status, $data, $message = '') {
       header('Content-Type: application/json');
       http_response_code($status);
       echo json_encode([
           'status' => $status,
           'message' => $message,
           'data' => $data
       ]);
       exit;
   }
   ?>

Implement Routes:

   // routes/users.php
   <?php
   require_once '../db.php';
   require_once '../utils/response.php';

   // Handle GET requests to fetch users
   if ($_SERVER['REQUEST_METHOD'] === 'GET') {
       $stmt = $pdo->query('SELECT * FROM users');
       $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
       sendResponse(200, $users, 'Users retrieved successfully.');
   }

   // Handle POST requests to create a new user
   if ($_SERVER['REQUEST_METHOD'] === 'POST') {
       $data = json_decode(file_get_contents('php://input'), true);
       if (isset($data['name']) && isset($data['email'])) {
           $stmt = $pdo->prepare('INSERT INTO users (name, email) VALUES (?, ?)');
           $stmt->execute([$data['name'], $data['email']]);
           sendResponse(201, null, 'User created successfully.');
       } else {
           sendResponse(400, null, 'Invalid input data.');
       }
   }
   ?>

Route All Requests Through index.php:

   // index.php
   <?php
   $uri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);

   if (strpos($uri, '/api/users') === 0) {
       require 'routes/users.php';
   } else {
       header('Content-Type: application/json');
       echo json_encode(['error' => 'Endpoint not found']);
       http_response_code(404);
   }
   ?>

4. Test the API

Use tools like Postman or cURL to test your API endpoints.
Example cURL command:

   curl -X GET http://localhost/api/users

5. Make It Public

Deploy the API:
- Host it on a public server or cloud platform (e.g., AWS, DigitalOcean, or shared hosting).
- Ensure that your server has PHP installed and configured.
Secure the API:
- Use HTTPS for encrypted communication.
- Implement authentication (e.g., API keys, OAuth, or JWT).
- Validate and sanitize user input to prevent SQL injection and other attacks.
Document the API:
- Create clear documentation using tools like Swagger or Postman Documentation.

Example Public API Documentation Snippet

GET /api/users
Description: Fetch a list of all users.

Response:
{
  "status": 200,
  "message": "Users retrieved successfully.",
  "data": [
    { "id": 1, "name": "John Doe", "email": "john@example.com" },
    { "id": 2, "name": "Jane Doe", "email": "jane@example.com" }
  ]
}

By following these steps, you can build, test, and deploy a secure and functional public API using PHP.

How TO Create MySQL and JavaScript API ?

Nahid TD — Sun, 12 Jan 2025 16:09:40 +0000

Creating a MySQL and JavaScript API typically involves setting up a backend server that interacts with the MySQL database and exposes endpoints for the frontend (which is often written in JavaScript) to communicate with. Here’s a general outline of how you can create such an API:

Backend (Node.js with Express)

Set Up Your Project:
- Initialize a new Node.js project (npm init).
- Install necessary packages like Express (npm install express), MySQL (npm install mysql), and possibly others depending on your needs (e.g., dotenv for environment variables).

Create Database Connection:

Use the mysql package to connect to your MySQL database. Here’s a basic example:

 const mysql = require('mysql');
 const connection = mysql.createConnection({
     host: 'localhost',
     user: 'your_username',
     password: 'your_password',
     database: 'your_database_name'
 });

 connection.connect((err) => {
     if (err) {
         console.error('Error connecting to MySQL: ' + err.stack);
         return;
     }
     console.log('Connected to MySQL as id ' + connection.threadId);
 });

 module.exports = connection;

Create API Endpoints:

Define routes in Express to handle different API requests (e.g., GET, POST, PUT, DELETE).

 const express = require('express');
 const router = express.Router();
 const db = require('../db'); // Your MySQL connection module

 // Example route to fetch data
 router.get('/data', (req, res) => {
     db.query('SELECT * FROM your_table', (err, results) => {
         if (err) {
             console.error('Error executing MySQL query: ' + err.stack);
             return res.status(500).json({ error: 'Database error' });
         }
         res.json(results);
     });
 });

 module.exports = router;

Handle CORS and Middleware (if necessary):
- Use middleware like body-parser and handle CORS headers if your frontend is served from a different domain.

Start the Server:

Listen on a specific port and start the server.

 const app = express();
 const PORT = process.env.PORT || 3000;

 app.use('/api', require('./routes/api'));

 app.listen(PORT, () => {
     console.log(`Server is running on port ${PORT}`);
 });

Frontend (JavaScript, typically with a framework like React or Vue.js)

Fetch Data from API:

Use fetch or a library like Axios to make HTTP requests to your backend API.

 fetch('http://localhost:3000/api/data')
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error('Error fetching data:', error));

Display Data:
- Once you receive data from the API, you can manipulate the DOM or update state in your frontend framework to display the data to users.

Security Considerations:

Always validate and sanitize user input to prevent SQL injection attacks.
Use environment variables (dotenv package) to manage sensitive information like database credentials.

This outline provides a basic structure for setting up a MySQL and JavaScript API. Depending on your project's complexity and requirements, you may need to expand on these steps with additional features such as authentication, authorization, and more sophisticated data handling.