title: Advice Needed: How to properly connect React to MongoDB
body: <p>I have been investing some time learning React, MongoDB, and other JS web app related tools. For a small project that I created, I am using this repository to create my toy app <a href="https://github.com/facebookincubator/create-react-app" rel="noreferrer">Create React App with no build</a>. As I've progressed through my app I've learned a lot of React related tools and materials after the fact.</p>
  
  <p>The part that I am stuck on is I am trying to submit a contact form's data into MongoDB but so far I'm unsuccessful in hooking up my app with MongoDB. </p>
  
  <p>Here is my code for MongoDB. I've pretty much copy and pasted the code from the MongoDB guides onto my web app into a <code>src/modules/mongo.js</code> file</p>
  
  <pre><code>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();
    });
  })
  </code></pre>
  
  <p>The above code is straightforward, it basically inserts one document into a collection. </p>
  
  <p>Here is my second file in <code>src/modules/contact.js</code></p>
  
  <pre><code>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.....
  
    }
  </code></pre>
  
  <p>Now so far, I've been able to work through the MongoDB guides, I've created my database, can access the console, and can insert data through the console. What I haven't figured out is how to wire my app to mongodb so when I click a submit button it will insert the document in the right database. Coming from Rails and using a little bit of Flask, I can usually call a <code>.create</code> method which connects to my database or do some sort of SQL Alchemy operation which opens and closes the database. I've tried this approach by attempting to combine the two files together but when I do that, I can't even run <code>npm start</code> otherwise I get these types of errors:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>So my question is how can I simply connect my app to open the mongodb database and write to it? I've been reading a lot of tutorials but then I get rabbit holed and confused further talking about <code>Express</code>, <code>Mongoose</code>, <code>Flux</code> and on and on. From a high level overview it seems like I don't even need Express or Mongoose, I simply just want to insert my data without a schema and to be honest I don't really get what Flux is but from what I gather, I don't really need it for my small app (I think). I could use a little nudge in the right direction on this one. Thanks.</p>
  
  <pre><code>  [1]: https://github.com/facebookincubator/create-react-app
  </code></pre>