Necessary recommendations: how to connect React to MongoDB correctly

Question

I invested some time learning React, MongoDB, and other JS-related web application tools. For the small project I created, I use this repository to create my toy application. Create a React application without assembly . As I progressed through my application, after that I learned a lot of tools and materials related to the reaction.

The part I'm stuck on is trying to send contact form data to MongoDB, but so far I have not been successful in connecting my application using MongoDB.

Here is my code for MongoDB. I pretty much copied and pasted the code from the MongoDB manuals into my web application in a filesrc/modules/mongo.js

const MongoClient = require('mongodb').MongoClient;
const assert = require('assert');
const ObjectId = require('mongodb').ObjectID;
const url = 'mongodb://localhost:27017/danielrubio';

const insertFormData(db, callback) {
   db.collection('contactsubmissions').insertOne( {
      "name": name,
      "message": message,
      "email": email
    }, function(err, result) {
    assert.equal(err, null);
    console.log("Inserted a document into the restaurants collection.");
    callback();
  });
};

MongoClient.connect(url, function(err, db) {
  assert.equal(null, err);
  insertDocument(db, function() {
    db.close();
  });
})

, .

src/modules/contact.js

import React, { Component } from 'react';
import Formsy from 'formsy-react';
import { FormsyText } from 'formsy-material-ui/lib';
import Paper from 'material-ui/Paper';
import RaisedButton from 'material-ui/RaisedButton';
import Snackbar from 'material-ui/Snackbar';
import '../assets/css/style.css';

class ContactForm extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = { open: false };
  }

  handleSubmit(data) {
    db.insertDocument({
       form submission info
       db.close()
    })
  }

  ......more code.....

  }

MongoDB, , . , mongodb, , , . Rails Flask, .create, - SQL Alchemy, . , , , npm start, :

Error in ./~/mongodb/lib/gridfs/grid_store.js
Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/mongodb/lib/gridfs
 @ ./~/mongodb/lib/gridfs/grid_store.js 42:7-20

Error in ./~/mongodb-core/lib/connection/connection.js
Module not found: Error: Cannot resolve module 'net' in /Users/drubio/Desktop/react_personal_website/node_modules/mongodb-core/lib/connection
 @ ./~/mongodb-core/lib/connection/connection.js 5:10-24

Error in ./~/mongodb-core/lib/connection/connection.js
Module not found: Error: Cannot resolve module 'tls' in /Users/drubio/Desktop/react_personal_website/node_modules/mongodb-core/lib/connection
 @ ./~/mongodb-core/lib/connection/connection.js 6:10-24

, : , mongodb ? , Express, Mongoose, Flux . , Express Mongoose, , , , , Flux, , , ( ). . .

  [1]: https://github.com/facebookincubator/create-react-app

Answer 1

( ), Node - , php, . React ajax- ,

express, - , MongoDB. Mongoose, MongoDB , MongoDB.