كيفية إرسال البيانات من React إلى Node.js وحفظها في MongoDB؟

يتطلب هذا الأمر عملاً على كلا الواجهتين frontend و  backend. على الواجهة الأمامية تنشئ نموذج form يحتوي على العنصر input  من نوع text وكذلك زر الإرسال هو input من نوع submit. وتقوم ببرمجة النموذج للإرسال بطريقة post مثلاً الى الراوت المعني في backend من خلال كتابة عنوانه في الخاصية action. يمكنك الإطلاع أكثر HTML FORM

في الواجهة الخلفية يمكنك إستعمال express كإطار عمل ليسهل عليك عمل الrouting وإستلام البيانات وخزنها في mongodb والتي ستستعمل mongoose من أجل التواصل معها من داخل الخادم server. للمزيد من التفاصيل express . أيضا للمزيد من المعلومات عن كيفية إنشاء المكونات في React

بتاريخ 28 دقائق مضت قال علي محسن:

يتطلب هذا الأمر عملاً على كلا الواجهتين frontend و  backend. على الواجهة الأمامية تنشئ نموذج form يحتوي على العنصر input  من نوع text وكذلك زر الإرسال هو input من نوع submit. وتقوم ببرمجة النموذج للإرسال بطريقة post مثلاً الى الراوت المعني في backend من خلال كتابة عنوانه في الخاصية action. يمكنك الإطلاع أكثر HTML FORM

في الواجهة الخلفية يمكنك إستعمال express كإطار عمل ليسهل عليك عمل الrouting وإستلام البيانات وخزنها في mongodb والتي ستستعمل mongoose من أجل التواصل معها من داخل الخادم server. للمزيد من التفاصيل express . أيضا للمزيد من المعلومات عن كيفية إنشاء المكونات في React

 

هل يمكنك شرح الخطوات اكثر ولاكن من ناحية ال back end 
وشكراََ

بتاريخ 38 دقائق مضت قال Mohamed Montaser3:

هل يمكنك شرح الخطوات اكثر ولاكن من ناحية ال back end 
وشكراََ

تنشيء خادم بواسطة express وتعين الroute المطلوب الوصول إليه من جانب الfrontend. طبعا يجب أن تكون أنشأت قاعدة البيانات ومثبت لديك mongoose لغرض الإتصال بها ومعالجة البيانات عليها.

...

const app = express(); // إنشاء الخادم
const PORT = 3000;
app.use(express.json()); // application/json إستقبال الطلبات من نوع

...

try {
  mongoose.connect( // تستعمل mongoose

    PATH_TO_MONGO_DB, // هنا الإتصال بقاعدة البيانات عن طريق رابط الإتصال بها
    { useNewUrlParser: true, useUnifiedTopology: true  },

      (err, instance)=> err ? console.log('connection error:', err)
          :console.log("connected to database ", instance.connections[0].name)
  )
} catch (error) {
  console.log("mongoose connection error:", error)
}

...

// تعريف الراوت
app.post("/my_route", (req, res)=> {
...
// هنا تتعامل مع البيانات المرسلة من الواجهات الأمامية
let body= req.body
...
})
// تشغيل الخادم على منفذ معين مثلا 3000
app.listen(PORT, () => console.log(`Express server currently running on port ${PORT}`));