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

});

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.