27.02.2023 в 21:34

Как использовать React с MongoDB

React и MongoDB - это две мощные технологии, которые можно использовать в тандеме для создания масштабируемых и эффективных веб-приложений. React - это хорошо известная библиотека JavaScript для создания пользовательских интерфейсов, в то время как MongoDB - ориентированная на документы база данных NoSQL, способная обрабатывать большие объемы данных. В этой статье мы рассмотрим, как использовать React с MongoDB.

Предпосылки:

Прежде чем мы начнем, убедитесь, что у вас есть Node.js и MongoDB, установленный в вашей системе.

Шаг 1: Создание нового проекта React

Нам нужно создать новый проект React для использования с MongoDB. Запустите следующую команду в терминале:

npx create-react-app my-app
cd my-app
npm start

Это сгенерирует новый проект React с именем my-app и запустит сервер разработки с помощью npm start.

Шаг 2: Настройка драйвера MongoDB

Чтобы подключиться к MongoDB, мы должны сначала установить драйвер MongoDB Node.js. Чтобы установить драйвер, введите следующую команду:

npm install mongodb

Шаг 3: Настройка базы данных MongoDB

Теперь мы должны создать новую базу данных MongoDB. Чтобы запустить сервер MongoDB, откройте новое окно терминала и введите следующую команду:

mongod

Это запустит MongoDB server вашей системы.

Чтобы подключиться к командной строке MongoDB, откройте другое окно терминала и выполните следующую команду:

mongo

Запустите следующую команду в командной строке MongoDB, чтобы создать новую базу данных с именем my-database:

use my-database

Шаг 4: Создание компонента React

Давайте создадим новый компонент React, который будет отображать данные из базы данных MongoDB. Создайте новый файл с именем Data.js в папке src вашего проекта React. Включите в файл следующий код:

import React, { useState, useEffect } from 'react';
import { MongoClient } from 'mongodb';

function Data() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const client = await MongoClient.connect('mongodb://localhost:27017');
      const db = client.db('my-database');
      const collection = db.collection('my-collection');
      const result = await collection.find().toArray();
      setData(result);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>Data from MongoDB:</h1>
      <ul>
        {data.map((item) => (
          <li key={item._id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Data;

Этот компонент извлекает данные из коллекции my-collection в базе данных my-database и отображает их в виде списка.

Шаг 5: Компиляция компонента

Давайте используем наше приложение React для рендеринга компонента данных. Добавьте следующий код в App.js файл в папке src:

import React from 'react';
import Data from './Data';

function App() {
  return (
    <div className="App">
      <Data />
    </div>
  );
}

export default App;

Шаг 6: Запуск приложения

Наконец, давайте запустим приложение React и посмотрим данные MongoDB в нашем браузере. Запустите следующую команду в вашем терминале:

npm start

Это запустит приложение React в вашем браузере по умолчанию. Данные из базы данных MongoDB должны отображаться в виде списка на экране.

Вывод

Объединение React и MongoDB - это эффективный способ создания масштабируемых и эффективных веб-приложений. Вы можете легко подключиться к MongoDb и извлечь данные для отображения в вашем приложении React, выполнив действия описанные в этой статье. Помните, что ваш код всегда должен быть чистым и организованным для упрощения обслуживания и масштабируемости. Получайте удовольствие от кодирования.

#MongoDB #React

860

Войти на сайт