Создание приложения React и MobX с помощью MVVM

Создание приложения React и MobX с помощью MVVM

Сегодня мы подробно рассмотрим создание полного редактора TodoEditor с помощью MobX и React, начиная с основ и заканчивая некоторыми соображениями.

Здесь вы найдете весь репозиторий кода!
https://github.com/mattiamanzati/react-mobx-todo-editor

Поиск редактора JavaScript

Прежде всего, вам, очевидно, понадобится любой текстовый редактор для редактирования кода JavaScript. Я рекомендую использовать VSCode, редактор JavaScript с открытым исходным кодом, поддерживаемый Microsoft. Попробуйте, это здорово!

Настройка среды сборки

Настройка среды сборки полного стека для приложения React может быть утомительной, но, к счастью, facebook опубликовал пакет create-react-app, который обеспечивает быстрый и удобный способ создания приложения React и автоматической настройки Babel и Webpack.

Теперь, после установки NodeJS в нашей системе, давайте установим глобально пакет create-react-app, выполнив

npm install -g create-react-app

Примечание: если вы работаете в Linux, вам может потребоваться префикс «sudo».

Теперь мы можем создать папку нашего проекта, запустив из родительской целевой папки:

create-react-app react-mobx-todo-editor

После загрузки некоторых зависимостей появится папка «react-mobx-todo-editor», и мы будем ссылаться на нее позже как «папка проекта».

К сожалению, предустановка не включает по умолчанию поддержку декораторов, которые мы будем использовать позже для украшения свойств класса, поэтому нам нужно «извлечь» конфигурацию по умолчанию и отредактировать ее вручную. Для этого просто запустите

npm run eject

внутри папки вашего проекта. Это приведет к созданию конфигурации и каталога сценариев. Теперь давайте установим плагин Babel для работы с декораторами:

npm install babel-plugin-transform-decorators-legacy --save-dev

Теперь нам нужно отредактировать как «config / babel.dev.js», так и «config / babel.prod.js» и добавить устаревший преобразователь декораторов в массив плагинов, как это, чтобы сообщить babel об этом дополнительном преобразователе:

plugins: [
    // handles @decorator
    require.resolve('babel-plugin-transform-decorators-legacy'),

Теперь ты можешь бежать

npm run start

для запуска сервера разработки: откроется страница браузера с приложением React по умолчанию.

Вы также можете запустить

npm run build

для создания производственной сборки вашего проекта! Появится папка «build», содержащая файлы сборки вашего одностраничного приложения.

Теперь вы можете очистить содержимое папки «src», так как мы поместим туда код нашего приложения.

Установка дополнительных необходимых пакетов

Теперь нам нужно установить mobx и mobx-react! Для этого просто введите:

npm install mobx mobx-react --save

Создание моделей предметной области с помощью MobX

React и MobX - отличные библиотеки, которые позволяют создавать чистую архитектуру MVVM на JavaScript.

Теперь давайте начнем с написания наших моделей предметной области, единственной моделью предметной области в этом примере является объект "Todo". Мы создадим файл Todo.js в папке src со следующим кодом:

Чтобы создать полный рабочий пример, я добавил два метода сериализации и десериализации, но имейте в виду, что вы можете использовать https://github.com/mobxjs/serializr, чтобы легко определить схему модели и легко сериализовать / десериализовать ее в JSON. .

Создание ViewModel в MobX

Вы знаете, модель - это еще не все! Вам нужно где-то определить логику взаимодействия с ним! Вот для чего предназначена ViewModel. ViewModel предоставляет данные и логику, которые будут использоваться представлением для взаимодействия с моделями предметной области.

Мы создадим файл «TodoViewModel.js» в папке «src» со следующим содержимым:

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

Создание React View

Теперь у нас есть все данные и методы для взаимодействия ... чего не хватает? Вид! Чтобы создать представление, мы просто создаем компоненты React, которые принимают опору «модель», которая является экземпляром нашей модели представления, и украшаем их «наблюдателем» из пакета «mobx-react».

Наблюдатель будет автоматически заставлять представление обновляться всякий раз, когда объект, указанный в качестве свойства нашего компонента, изменяет наблюдаемые свойства. И это именно наш случай; мы хотим, чтобы представление автоматически обновлялось при изменении нашей ViewModel или нашей модели.

Таким образом, наше представление полностью отделено от нашей логики. Мы могли бы, например, воспользоваться этой функцией и создать представление React Native, используя ту же модель и модель представления, что и HTML. .

Обратите внимание, что я использовал классический класс компонентов React для улучшения читаемости, но вы должны использовать StatelessFunctionalComponents, поскольку данные поступают из модели представления.

Подключение его

Наконец, последний шаг - подключить ViewModel и View и приступить к их рендерингу. Для этого мы просто создаем файл index.js в нашей папке src, который импортирует View и ViewModel, создает экземпляр ViewModel и визуализирует View с данным экземпляром ViewModel.

Теперь мы запускаем «npm run start» и запускаем наш первый редактор React & MobX Todo Editor!

Если вас это устраивает, теперь вы можете просто запустить «npm run build» и передать содержимое папки «build» на HTTP-сервер!

Сделай красивее

Какое ваше приложение качать? Мы могли бы использовать компоненты пакета MaterialUI, чтобы наше приложение для задач выглядело лучше! Вам просто нужно обновить представление, чтобы использовать пакет компонентов MaterialUI! Прежде всего, давайте установим пакет material-ui:

npm install material-ui react-tap-event-plugin --save

Вот код для его создания! Вы можете найти больше компонентов в документации Material UI API!

вам также нужно будет добавить эти строки в начало index.js, чтобы поддерживать событие касания мобильных устройств:

Теперь вы можете создавать большие приложения с помощью React & MobX; просто продолжайте создавать Model, ViewModel и Views и соединяйте их. Как и в других языках, вы можете использовать несколько способов связать представление и модель представления.

Самый простой - создать синглтон ViewModel и просто передать его как свойство компонента React, как мы это делали раньше.

Другой способ, позволяющий избежать синглтона, - использовать ‹Provider /› и connect () из пакета mobx-react, что позволяет определить поставщика верхнего уровня, который предоставляет экземпляры ViewModels. и представления будут подключаться () к одной из предоставленных моделей представления.

Вы также можете проверить пакет mobx-mvvm, который представляет собой продолжающийся эксперимент, который предоставляет не только способ связать View и ViewModels, но также предоставляет способ связать свойства компонента с свойства ViewModel автоматически.

Здесь вы можете найти тот же пример этого сообщения, связанный с mobx-mvvm.

Спасибо за ваше время!