Member Avatar for engrjd91

I have performed some query operations in nodeJS with mySQL and now I want to have a reactJS form to be embedded with it to display the results on web page. Can anyone give an idea how can I achieve the same?

var mysql = require('mysql');

var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    port: '3307'
});

con.connect(function(err)
{
 if (err) throw err;
 console.log("Connected to mySQL");
 con.query("CREATE DATABASE testNodeDB", function(err, result)
 {
  if (err) throw err;
  console.log("Database created by Jawad..");
 })
});

con.connect(function(err){
 if (err) throw err;
 console.log("Database connected finally..");
 var sql = "CREATE TABLE customers_primary_key (id INT AUTO_INCREMENT PRIMARY KEY, name varchar(255), address VARCHAR(255))";
 con.query(sql, function(err,result){
     if (err) throw err;
     console.log("Table Created..");
    });

});

con.connect(function(err){
 if (err) throw err;
 console.log("Database connected finally..");
 var sql = "INSERT INTO customers_primary_key (name, address) VALUES ('Company Inc', 'Highway 37')";
 con.query(sql, function(err,result){
     if (err) throw err;
     console.log("Insertion Done..");
    });

});

con.connect(function(err){
 if (err) throw err;
 console.log("Database connected finally..");
 var sql = "SELECT * FROM customers_primary_key";
 con.query(sql, function(err,result, fields){
     if (err) throw err;
     console.log(result);
    });

});
Edited by Dani because: This is a question
  • 2 Contributors
  • 1 Reply
  • 518 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by pankaj_patel

Dani AI

Generated

Good direction from — the reliable pattern is to put a thin JSON API between MySQL and React, then have the React app consume that API. For an existing Node project this means: (1) create REST (or minimal JSON) endpoints in an Express server, (2) keep database access on the server only, and (3) fetch those endpoints from the React UI. This keeps credentials and SQL on the backend and gives a clean separation for testing and deployment.

Server-side notes and best practices: use a single connection pool (not repeated connect calls), keep credentials in environment variables, and use parameterized queries or a promise-based client to avoid callback nesting. Test endpoints first with curl/Postman and return sensible HTTP status codes and JSON for success/errors. Minimal example (using mysql2/promise) showing intent only:

const pool = mysql.createPool({ /* use env vars */ });

app.get('/api/items', async (req, res) => {
  const [rows] = await pool.query('SELECT * FROM items WHERE id = ?', [req.query.id || null]);
  res.json(rows);
});

React-side flow: fetch the API, store results in state, and render. In development a Create React App front end can use a proxy or enable CORS on the server; in production build the React app and serve its static files from Express or put front and API behind a reverse proxy. Example client fetch pattern:

useEffect(() => {
  fetch('/api/items').then(r => r.json()).then(setItems).catch(console.error);
}, []);

Quick troubleshooting and cautions: enable CORS or use CRA proxy to avoid cross-origin blocks; never expose DB credentials to the client; validate and sanitize inputs server-side to prevent injection; log SQL errors and use connection pooling for concurrency. For longer-term maintenance consider an ORM (Sequelize/Knex) or a query layer and keep API routes small and focused so the React UI can consume stable JSON endpoints.

Member Avatar for pankaj_patel

NodeJS & MYSQL are the BackEnd part or processing part of the App

white ReactJS provide the Front End or View part to the App. To integrate all these, best way is to create API with NodeJS+MySQL and use it in the ReactJS app

I wront a similar answer at hashnode: https://hashnode.com/post/how-can-use-react-js-node-js-mysql-together-cjdlfbukh01vqn9wuaucmng6h/answer/cjdlqtr05033l6iwtmbzubiok where I explained how to use these all together.

You above script is good, but it dones all operations i.e. CRUD at onces. To make it useable from Front end, you need to make API endpoints like /posts, /posts/100, /users, /users/pankaj etc. And then respond as per the request.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.