[menu_in_post_menu menu=231]
В данном руководстве мы собираемся исследовать стек MERN, создав реальное приложение от начала и до конца.
Стек MERN содержит следующие технологии:
- Node.js: Node.js является средой выполнения кода на языке JavaScript, основанный на движке Chrome V8. Node.js принес JavaScript в бекенд в виде серверного языка;
- MongoDB: Документоориентированная база данных с открытым исходным кодом;
- Express: Быстрый, стабильный и минималистичный web-фреймворк для Node.js;
- React: JavaScript — фронтенд библиотека для построения пользовательских интерфейсов.
[note]Стек MERN очень похож на популярный стек MEAN и MEVN. Единственное отличие состоит в том, что в средстве MEAN используется Angular, а в MEVN — Vue для создания интерфейсного веб-приложения, а в стеке MERN используется React. [/note]
Приложение, которое мы будем создавать в этой серии руководств, представляет собой простое приложение To-Do. Используя этот пример, можно продемонстрировать, как создать приложение CRUD (Create, Read, Update и Delete) с нуля, используя стек MERN!
В этой первой части этой серии мы собираемся завершить настройку проекта React для создания фронтальной части примера приложения стека MERN. В следующей части мы продолжим реализацию бекенда в виде сервера на Node.js/Express.
Настройка приложения React
Для этого урока предполагается, что Node.js установлен в вашей системе. Если это не так, сначала перейдите на https://nodejs.org/ и следуйте инструкциям по установке для вашей платформы.
Вы можете проверить, установлен ли Node.js в вашей системе, набрав:
$ node -vв командной строке. Это распечатает версию Node.js, которая установлена в вашей системе.
На следующем шаге мы создадим первоначальный проект React с помощью скрипта create-react-app. В create-react-app замечательно то, что этот сценарий можно выполнить с помощью команды npx без необходимости сначала устанавливать его в своей системе. Просто выполните следующую команду:
$ npx create-react-app mern-todo-appВыполнение этой команды создает новый каталог проекта mern-todo-app. Внутри этой папки вы найдете шаблон проекта React по умолчанию со всеми установленными зависимостями. Перейдите во вновь созданную папку:
$ cd mern-todo-appи запустите веб-сервер разработки, выполнив следующую команду:
$ npm startТеперь вы должны увидеть следующий результат в браузере:
