Стек 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 благодарит за прочтение статьи…