React.js वेब एप्लिकेशन में डेटाबेस को डेटा भेजा जा रहा है

आपको एक सर्वर की आवश्यकता होगी जो आपके रिएक्ट ऐप से अनुरोधों को संभालता है और उसके अनुसार डेटाबेस को अपडेट करता है। एक तरफ़ा NodeJS, एक्सप्रेस और node-mysql का उपयोग करना होगा एक सर्वर के रूप में:

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

// Set up connection to database.
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'me',
  password: 'secret',
  database: 'my_db',
});

// Connect to database.
// connection.connect();

// Listen to POST requests to /users.
app.post('/users', function(req, res) {
  // Get sent data.
  var user = req.body;
  // Do a MySQL query.
  var query = connection.query('INSERT INTO users SET ?', user, function(err, result) {
    // Neat!
  });
  res.end('Success');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

तब आप कर सकते हैं fetch . का उपयोग करें सर्वर से POST अनुरोध करने के लिए एक प्रतिक्रिया घटक के भीतर, कुछ इस तरह:

class Example extends React.Component {
  constructor() {
    super();
    this.state = { user: {} };
    this.onSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(e) {
    e.preventDefault();
    var self = this;
    // On submit of the form, send a POST request with the data to the server.
    fetch('/users', { 
        method: 'POST',
        data: {
          name: self.refs.name,
          job: self.refs.job
        }
      })
      .then(function(response) {
        return response.json()
      }).then(function(body) {
        console.log(body);
      });
  }
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" placeholder="Name" ref="name"/>
        <input type="text" placeholder="Job" ref="job"/>
        <input type="submit" />
      </form>
    );
  }
}

ध्यान रखें कि इसे प्राप्त करने के अनंत तरीकों में से यह केवल एक है।