Стек MERN. Что, как и почему?

Внимание: "Данная статья является ознакомительной и несет лишь основную информацию о стеке технологий 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 благодарит за прочтение статьи…