To fetch data from MySQL in a React JS application, you can follow these steps:

  1. Install the required dependencies:
  • Install the mysql package using npm or yarn:
    npm install mysql
    yarn add mysql
  • Additionally, you may also need to install dotenv if you plan to store your database credentials in a .env file:
    npm install dotenv
    yarn add dotenv
  1. Create a database connection file:
  • Create a new file, e.g., db.js, to establish a connection with your MySQL database.
  • Import the mysql package and create a connection object using your database credentials: const mysql = require('mysql'); const connection = mysql.createConnection({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME }); module.exports = connection;
  1. Create a component to fetch and display data:
  • Create a new component, e.g., DataComponent.js, where you want to fetch and display the data.
  • Import React and any other required dependencies: import React, { useState, useEffect } from 'react'; import axios from 'axios'; // You may need to install the axios package if not already installed.
  • Define the component and use the useState hook to manage the fetched data: const DataComponent = () => { const [data, setData] = useState([]); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { const response = await axios.get('/api/data'); // Assuming you have set up an API endpoint for fetching data. setData(; } catch (error) { console.error('Error fetching data:', error); } }; return ( <div> <h1>Data Component</h1> <ul> { => ( <li key={}>{}</li> ))} </ul> </div> ); }; export default DataComponent;
  1. Set up an API endpoint on your server to fetch data from the database:
  • Create a new file, e.g., api.js, to define your API endpoints.
  • Import Express and your database connection: const express = require('express'); const connection = require('./db'); // Assuming the database connection file is in the same directory.
  • Create a router and define an endpoint to fetch data: const router = express.Router(); router.get('/data', (req, res) => { const query = 'SELECT * FROM your_table'; // Replace "your_table" with the actual table name. connection.query(query, (error, results) => { if (error) { console.error('Error fetching data:', error); res.status(500).json({ error: 'Internal server error' }); } else { res.json(results); } }); }); module.exports = router;
  1. Set up your server:
  • In your main server file (e.g., server.js), import and use the API router:
    const express = require(‘express’);
    const apiRouter = require(‘./api’); // Assuming the API router file is in the same directory. const app = express(); app.use(‘/api
Leave A Comment