You may want to build an end-to-end project using React and a database management system. If you already have Xampp installed on your computer, Mysql is a part of its tech stack. 

Mysql is an open-source rational database management system.(RDBMS). Xampp as well as other tech stack solution uses it as a database solution because it provides a variety of benefits including scalability and flexibility.

In this article we will outline details on how to use Xampp's Mysql database in your React application.

Step 1. Start Xampp Apache and Mysql servers

Step 2. Go to phpMyAdmin and create database with tables

Step 3. Create a .env file at the root of your React project.

Edit .env file as below:

DB_TYPE=mysql

MYSQL_HOST=localhost
MYSQL_DATABASE=yourdatabasename
MYSQL_USERNAME=root
MYSQL_PASSWORD=
MYSQL_PORT=3306

Step 4. Use database in your React project

import * as mysql from 'mysql';

const { MYSQL_HOST, MYSQL_DATABASE, MYSQL_USERNAME, MYSQL_PASSWORD, MYSQL_PORT } = process.env;

const connection = mysql.createConnection({
    host: MYSQL_HOST,
    user: MYSQL_USERNAME,
    password: MYSQL_PASSWORD,
    database: MYSQL_DATABASE,
    port: MYSQL_PORT
});

const query = promisify(connection.query.bind(connection));

That is it, hope this was useful information.