Как автоматически генерировать формы в React и Material-UI с помощью MSON

1656516369 kak avtomaticheski generirovat formy v react i material ui s pomoshhyu

от Джеффа Кокса

0*WKoVhYdsFzzh3_21
https://redgeoff.github.io/mson-react

Внедрение отличных форм может стать пустой тратой времени. С помощью нескольких строк JSON вы можете использовать MSON для создания форм, которые выполняют проверку в реальном времени и имеют согласованный макет. Кроме того, MSON поставляется с кучей интересных вещей, таких как средства выбора дат, замаскированные поля и коллекции полей.

Отказ от ответственности: эта публикация предназначена для тех, кто желает использовать Material-UI из React. Будущие версии MSON будут поддерживать другие слои рендеринга.

Что такое MSON?

MSON – это декларативный язык, имеющий возможности объектно-ориентированного языка. Компилятор MSON позволяет создавать приложения с JSON. Конечная цель MSON – позволить кому-либо разрабатывать программное обеспечение визуально. Вы также можете использовать кусочки MSON для разработки формы.

Основная форма, созданная с помощью MSON

Просто объявите свою форму в JSON. Затем позвольте компилятору MSON и слою визуализации пользовательского интерфейса автоматически генерировать ваш пользовательский интерфейс:

Вы пытались прислать форму, не заполняя никакие значения? Вы заметили, как проверка в реальном времени автоматически запекается?

Теперь давайте повнимательнее посмотрим на происходящее. Первый блок кода содержит определение JSON, описывающее поля в форме:

Этот код добавляет следующие поля в форму:

  1. The Текст компонент отображает некоторую уценку
  2. The PersonNameField используется для записи имени и фамилии человека
  3. The DateField позволяет пользователю выбрать дату с помощью удобного средства выбора даты
  4. The PhoneField использует маску ввода и коды стран, чтобы управлять пользователем при вводе телефонного номера
  5. The SubmitField содержит а Отправить и позволяет пользователю прислать форму нажатием кнопки или нажатием клавиши Enter

Теперь давайте посмотрим на код, отображающий компонент и обрабатывающий событие submit:

Это оно! Да! Слой mson-react автоматически знает, как воспроизвести компонент формы. Он использует pub/sub и Pure Components, чтобы поддерживать воспроизведение в актуальном состоянии.

Если ошибки проверки нет, а пользователь нажимает кнопку отправки, создается событие с названием, равное названию кнопки. В нашем случае это событие называется подать. Поэтому мы можем определить обработчик с помощью onSubmit собственность. Чтобы все было просто, мы просто уведомляем пользователя о введенных значениях. Обычно вы хотите сделать что-то вроде связи с API, перенаправление и т.д.

Основная форма 2

Теперь давайте немного глубже рассмотрим CRUD на другом примере:

Первое, что вы можете заметить, это валидаторы в определении:

Каждое поле имеет стандартный набор валидаторов, например EmailField гарантирует, что адреса электронной почты имеют действительный формат. Вы можете расширить эти валидиторы для определенного поля или даже для всей формы. К примеру, вы можете запретить пользователю войти nope@example.com.

Далее, давайте посмотрим на код, который загружает исходные значения при монтаже компонента:

Этот код можно также легко заменить кодом, который асинхронно получает значение из какого-то API.

Наконец, мы используем более сложный прослушиватель событий для обработки действия отправки. В реальном приложении вы, вероятно, захотите отправить запрос в API для сохранения данных. Вы получите ответ от этого API. Если вы получаете сообщение об ошибке, например адрес электронной почты уже используется, вы можете сообщить эту ошибку пользователю:

Живая демонстрация

Эта публикация касается только небольшой части того, что вы можете делать с помощью MSON. Поскольку MSON является полнофункциональным языком, вы можете объявить все типы классных компонентов. Если вы заинтересованы в том, чтобы увидеть больше живых примеров, посмотрите живую демонстрацию.

0*WKoVhYdsFzzh3_21
https://redgeoff.github.io/mson-react

Заверните это!

Если вы используете React и Material-UI, вы можете ускорить разработку приложений, автоматически генерируя формы из JSON. Это может быть особенно полезно, если вам нужно быстро загрузить приложение и не хотите беспокоиться о создании пользовательского интерфейса с нуля.

Если вам понравился этот пост, отдайте ему хлопок или два. Счастливая автогенерация!

Об авторе

Джефф Кокс является создателем MSON, новый декларативный язык программирования, который позволит каждому разрабатывать программное обеспечение визуально. Большую часть последних 15 лет он был самозанят. Ему нравится браться за амбициозные проекты, которые в то же время сводят с ума жену, например создание базы данных и распределенной системы синхронизации данных. Вы можете связаться с ним @redgeoff7 или github.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *