Добавление MongoDB в приложение React

Я создал простое приложение со списком дел, используя ReactJS через приложение create-response-app. Каждое добавляемое мной задание помещается в массив, называемый задачами, как показано ниже.

    state = {
    inpVal: '',
    todos: [],
  }

onInputSubmit = (event) => {
    event.preventDefault();
    //console.info('event fired');
    const newTodo = {
      value: this.state.inpVal,
      completed: false
    };
    const todos = this.state.todos;
    todos.push(newTodo);
    this.setState({ todos: todos, inpVal: '' })

  }

Я хочу добавить этот массив задач в mongoDB. У меня очень мало информации об этом.

Пробовал искать в Google, но было продемонстрировано много разных способов. Я не могу осмыслить это.

Пожалуйста, предложите способ / шаги для достижения этой задачи.

React предназначен только для внешнего интерфейса. Выполняется в браузере пользователя. Вам также понадобится бэкэнд. Бэкэнд получит доступ к базе данных. Есть много разных способов создать бэкэнд, например: с node.js и express, ASP.NET, PHP, ...

Daniel Hilgarth 24.08.2018 18:11

Создайте api для доступа к базе данных. Клиентские приложения не должны пытаться напрямую обновлять базы данных.

Julian Torregrosa 24.08.2018 18:20

@ DanielHilgarth .. Если я добавлю серверную часть node.js с помощью express для маршрутизации, а также создаю схему mongodb с использованием mongoose, как мне передать каждую задачу todo из внешнего интерфейса в серверную часть?

Avinash Gayam 24.08.2018 18:38

Для передачи данных на бэкэнд вы можете использовать axios

Craques 24.08.2018 19:03

вы можете использовать localStorage

Omar 24.08.2018 19:19
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
135
0

Другие вопросы по теме