React.js के साथ MongoDB दस्तावेज़ डालें

मुझे लगता है कि आपको सर्वर पर डेटाबेस की आवश्यकता होगी, इसलिए आपको डेटा पोस्ट करने के लिए एपीआई की आवश्यकता हो सकती है क्योंकि डेटाबेस स्वयं क्लाइंट पर नहीं है। मैं Supergent डेटा भेजने के लिए और Mongoose स्कीमा और मोंगो डेटाबेस बनाने के लिए।

messageModel.js

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

// create a schema
const messageSchema = new Schema({
  // You may need to add other fields like owner
  addedOn: String,
  message: String,
});
const Message = mongoose.model('Message', messageSchema);
module.exports = Message;

server.js

import Message from './models/messageModel';

mongoose.connect('mongodb://user:[email protected]:port/database');

app.post('/api/messages', (req, res) => {
  const doc = new Message({ message: req.body.message })
  doc.save();
});

client.js

import React, { Component } from 'react';
import request from 'superagent';

class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
    };
    this.handleMessageInput = this.handleMessageInput.bind(this);
  }
  handleMessageInput(e) {
    this.setState({ message: e.target.value });
  }
  handleSubmitMessage() {
    console.log('starting to submit profile');
    if (this.state.isFormFilledProfile) {
      console.log('Profile Form appears filled');
      const data = {
        message: this.state.message,
      };

      request
        .post('/api/messages')
        .send(data)
        .set('Accept', 'application/json')
        .end((err, res) => {
          if (err || !res.ok) {
            console.log('Oh no! err');
          } else {
            console.log('Success');
          }
        });
    }
  }
  render() {
    return (
      <div>
        <div>
          <form onSubmit={this.handleSubmitMessage}>
            <input
              onChange={this.handleMessageInput}
              value={this.state.message}
            />
            <button type='Submit' value='Submit'>Submit</button>
          </form>
        </div>
      </div>
    );
  }
}

export default componentName;

आपको प्रतिक्रिया प्रपत्र मार्गदर्शिका यहां भी पढ़ने की आवश्यकता हो सकती है। ऑल द बेस्ट!!!