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