조언 필요 : React를 MongoDB에 올바르게 연결하는 방법

Question

React, MongoDB 및 기타 JS 웹 앱 관련 도구를 배우는 데 얼마간의 시간을 투자했습니다. 내가 만든 작은 프로젝트의 경우이 저장소를 사용하여 내 장난감 앱 Create React App with no build을 만듭니다. 내가 앱을 통해 진행하면서 나는 사실 이후 많은 React 관련 도구와 자료를 배웠다.

내가 붙어있는 부분은 연락처 양식의 데이터를 MongoDB에 제출하려고하지만 지금까지 MongoDB에 내 앱을 연결하는 데 실패했습니다.

다음은 MongoDB를위한 코드입니다. 나는 꽤 많은 사본을했습니다와 MongoDB를에서 코드가하는 src/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를 사용하면 보통 데이터베이스에 연결하거나 데이터베이스를 열고 닫는 SQL Alchemy 연산을 수행하는 .create 메서드를 호출 할 수 있습니다. 나는 그렇지 않으면 나는 이러한 유형의 오류 얻을 함께 두 개의 파일을 결합하지만 난 그렇게 할 때, 심지어 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

노드는 PHP와 같은 다른 것이 될 수있는 엔드 포인트 (서버 측)를 작성해야하며 요청을 수락하고 데이터베이스에 데이터를 삽입합니다. 귀하의 React 앱이 서버에 아약스 전화를 걸면 서버가 데이터를 데이터베이스에 저장합니다.

Express로이를 수행하려면 클라이언트에서 데이터를 가져올 하나의 경로로 간단한 익스프레스 앱을 만들 수 있습니다. 그것을 MongoDB에 보낼 것입니다. MongoDB를 사용하지 않아도 MongoDB 드라이버 나 외부를 사용하여 데이터를 MongoDB에 보낼 수 있습니다.