Внимание: "Данная статья является ознакомительной и несет лишь основную информацию о стеке технологий MERN."

"Все кратко и просто".

Что же такое стек технологий MERN?

MERN -> MongoDB, Express, ReactJS, NodeJS  

MERN – является одной из популярных стеков технологий для создания одностраничных приложений, так называемых SPA приложений.

(Single Page Application -> web приложение загружаемое на одну HTML страницу, где благодаря обновлению с помощью JavaScript, во время использования не нужно перезагружать страницу)

Из чего состоит?

MongoDB -> документоориентированная система управления базами данных. Является NoSQL базой данных (нереляционный тип базы данных) с открытым исходным кодом. Использует JSON структуру.

Express -> является простым и минималистичным web-framework для NodeJS. Служит для создания веб приложений, а также для создания API.

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('Hello World!')
})
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

ReactJS -> библиотека с открытым исходным кодом JavaScript. Служит для создания пользовательского интерфейса (frontend) и позволяет создавать сложные UI из маленьких изолированных компонентов.

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      product: [],
    };
  }
  componentDidMount() {
    fetch("http://localhost:3000/products")
      .then((respons) => {
        return respons.json();
      })
      .then((product) => {
        this.setState({ product });
        console.log(product)
      })
      .catch((error) => {
        console.log("Error");
      });
  }
  render(){
    return (
      <div className="App">
        <Header/>
        <Routes>
          <Route exact path="*" element={<Home post={this.state.product}/>} />
          <Route path="card/:name" element={<CardFull post={this.state.product}/>}/>
        </Routes>
      </div>
    );
  }
}

NodeJS -> среда выполнения JavaScript построенная на движке Chrome V8. Служит для работы с серверной частью. С помощью NodeJS можно писать полноценные веб приложения или использовать его как веб-сервер.

var http = require('http');
var static = require('node-static');
var file = new static.Server('.');
http.createServer(function(req, res) {
  file.serve(req, res);
}).listen(8080);
console.log('Server running on port 8080');

Создание базы данных (MongoDB)

MongoDB можно развернуть и на своем локальном компьютере, а так же можно воспользоваться MongoDB Atlas - глобальный облачный сервис баз данных для приложений. С помощью MongoDB Atlas можно развернуть управляемую базу данных. Сервис автоматически настраивает и размещает базу данных, а единственное, что требуется сделать пользователю это заполнить базу данных содержимым.

Этапы работы в MongoDB Atlas:

  • Создание учетной записи в MongoDB Atlas

  • Создание нового кластера

  • Создание нового пользователя в базе данных.

  • Создание белого списка IP-адресов.

  • Подключение к кластеру.

  • Добавление URL в приложение для подключения к базе данных.

Серверная часть (NodeJS + Express)

Кратко объясню создание простого веб сервера. И так начнем с установки всего необходимого. (Данный образец является лишь примером)

  • Инициализируем проект

npm init –y
  • Добавляем в проект Express

npm install express
  • Создаем JS файл для сервера – index.js

Открываем его и импортируем Express (1), после чего вызываем функцию express (2), которая создаст нам новое приложение.

const express = require('express');
const app = express();
  • Создание маршрутов

С помощью маршрутизации описываются ответы Node.js приложения на запросы, поступающие с клиентской стороны или другого сервера (в случае, если реализуется API) на конкретный URL.

app.get('/api/users', (req, res) => {...});
app.post('/api/users', (req, res) => {...});
app.put('/api/users', (req, res) => {...});
app.delete('/api/users', (req, res) => {...});
  • Настройка слушателя

Чтобы была возможность запускать сервер, нужно будет вызвать метод listen, так же можно будет указать номер порта на котором будет сервер.

app.listen(3001, () => {
    console.log('Application listening on port 3001!');
});

Клиентская часть (ReactJS)

Когда закончили работу с серверной частью, можно приступать к клиентской части. В нашем случае будем использовать ReactJS

Использование React значительно облегчает создание интерфейсов благодаря разбивке каждой страницы на компоненты.

В React уже встроена специальная утилита, которая позволяет быстро генерировать проекты без настройки Webpack.

(Webpack -> сборщик модулей Javascript, так же может служить для HTML, CSS. Этот инструмент компилирует модули в единый файл)

Для генерации проекта используем утилиту npx и прописываем команду create-react-app

npx create-react-app client

client -> папка куда генерируется проект

Переходим в папку и запускаем проект

cd client
npm start

И так, теперь приложение будет доступно по ссылке http://localhost:3000/

Итог

MERN -> это стек Javascript, который используется для более простого и быстрого развертывания полнофункциональных веб-приложений. Стек MERN состоит из 4 технологий: MongoDB, Express, ReactJS, Node.js. Он разработан, чтобы сделать процесс разработки более плавным и легким, а также имеет очень большой плюс, так как весь стек полностью реализуется на JavaScript

ZAYMAX благодарит за прочтение статьи…

Комментарии (8)


  1. polearnik
    01.03.2022 19:06
    +2

    Express -> является простым и минималистичным. Трижды ха. Экспресс уже давно считается антипаттерном в разработке. он тяжелый и к его архитектуре есть большие вопросы. Он такой популярный из-за огромного количества туториалов для начинающих.


    1. AlexR0v
      01.03.2022 19:34
      +1

      а что по вашему лучше выбрать тогда? без наезда, просто интересуюсь мнением


      1. misha98857
        01.03.2022 20:34
        +1

        NestJS, если хочется писать бек на ts.


        1. AlexR0v
          01.03.2022 20:37

          Я тоже подумал за него и он мне очень нравится, но выглядет значительно более "тяжелым", архитектура там конечно пориятнее.


        1. muturgan
          01.03.2022 21:01
          +1

          Nest внезапно под капотом использует express (по умолчанию). Если хотите избавиться от "тяжести" экспресса при обработке http запросов - пожалуйста на забывайте подключать platform-fastify


          1. little-brother
            01.03.2022 22:36
            -1

            Судя по package.json fastify уже используется по умолчанию.


            1. muturgan
              02.03.2022 00:03
              +1

              Вы смотрите на package.json пакета @nestjs/platform-fastify. Это нам ничего не говорит о том что нест (конкретно пакет @nestjs/core) использует по умолчанию.
              По умолчанию как раз используется @nestjs/platform-express а fastify надо подключать дополнительным телодвижением.
              Вот ссылка на соответствующий раздел документации:
              https://docs.nestjs.com/techniques/performance


      1. polearnik
        02.03.2022 13:09

        пользуюсь fastify. претензий к нему нет