-1

How can I connect MySQL to ReactJS? Are there any examples or tutorials which explain this that I can follow?

I wrote the following code, but get errors:

var React = require('react');
var ReactDOM = require('react-dom');

var mysql = require('mysql');
var express = require('express');
var app = express();

var fs = require('fs');

var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : ' ',
    database : 'node'
});

connection.connect();

app.post('/users', function(req, res) {

    var user = req.body;

    var query = connection.query('INSERT INTO signup SET ?', user,  function(err, result) {

    });
    res.end('Success');
});

What is wrong with this code?

Dave
  • 498
  • 2
  • 7
  • 22
arslan
  • 45
  • 2
  • 2
  • 6
  • What error did you get? – shaochuancs Jul 04 '17 at 06:10
  • There is no connection between the two.... If you want to render react in the backend, simply get data from mysql and pass it to the rendering of react. But there is no react-dom in the backend. – Tzook Bar Noy Jul 04 '17 at 06:11
  • Reactjs is a client-side library. And a mysql database is as backend as you can get. A better way to connect a database to the backend is to build an api server. This hides your sensitive database info and allows for less coupling. – Matty Jul 04 '17 at 06:11
  • in task runner explorer there is no error, but when my app is open on console there is such an error JS.js:40217 Uncaught Error: Cannot find module "fs" at webpackMissingModule (JS.js:40217) at Object. (JS.js:40217) at __webpack_require__ (JS.js:20) at Object. (JS.js:37793) at Object. (JS.js:38417) at __webpack_require__ (JS.js:20) at Object. (JS.js:38440) at __webpack_require__ (JS.js:20) at Object. (JS.js:33868) at __webpack_require__ (JS.js:20) – arslan Jul 04 '17 at 06:18
  • Before to try to do some server side rendering with React you should first manage to call your API from your client side with React. For this, you might need to use redux-thunk, redux-saga, mobx, or ... I guess you are mixing up a bit everything. Also, to request your database, I would suggest you to use an ORM, it will be much easier and cleaner. – Alexandre Jul 04 '17 at 06:58
  • This is not a good practice to access the database this way. Please build an API server for accessing the database. you can use Node.js for the creating APIs and these APIs can be accessed via react.js – Sunny Jul 04 '17 at 12:30

1 Answers1

0

The error you mentioned in the comments, it's because you are trying to require fs module, however in doesn't exist in the front-end with webpack by default. Of course you could provide a polyfill but that's not what's being asked here.

So let's take a step back. How can one connect to MySQL?

The usual method to connect to MySQL is making a TCP connection, well normally MySQL driver does this for you so you don't need to know exactly how, but this means you can't really connect from Javascript on browser.

However you can do this in the backend/server-side with node.js or any other server-side language. The way normally this is done is that, the backend exposes an HTTP(s) API that can be accessed by the front-end. This could be a REST API, GraphQL, or even something as complex as SOAP(which I don't suggest) and through this API, the database is exposed. This is a common design in the usual web applications and tiered architectures.

Meanwhile, you can with Mysql Labs HTTP plugin, you can expose your database to the browser without writing any API of your own, but of course if you go that path, you gotta know what your doing and have top security standards.

Farid Nouri Neshat
  • 29,438
  • 6
  • 74
  • 115