Здравствуйте, кодеры!
Формы являются важной частью каждого приложения, от регистрации, входа в систему или сбора опроса от наших пользователей. Формы могут показаться простыми, но это не так. Цель этой статьи — предоставить сравнение наиболее часто используемых форм React Forms с плюсами, минусами и примерами кода: Formik
, React-Hook-Form
и React-Final-Form
. Для новичков React — это суперпопулярная JS-библиотека для создания интерактивных пользовательских интерфейсов, созданная компанией Facebook.
Вот темы, рассматриваемые в этом материале:
- ✅ Зачем нам нужны
формы
? - ✅ Знакомство с
React
(краткое) - ✅
Formik
: плюсы, минусы и пример - ✅
React-Hook-Form
: плюсы, минусы и пример - ✅
React-Final-Form
: плюсы, минусы и образец - ✅ Выводы и ресурсы
- ✅ Бесплатный
React Sample
: ягоды (используйте Formik) - ✅ Бесплатный
React Sample
: Datta Able (используйте Formik)
✨ Зачем нужны формы
Как упоминалось выше, формы могут показаться тривиальными и простыми в кодировании, но это не так во всех случаях. Формы требуют проверки информации, предоставляемой пользователем, и кодирование нескольких форм в разных частях наших проектов может занять много времени. Чтобы решить эту проблему, мы можем использовать библиотеки Form, построенные поверх React
, выпущенные в экосистеме с открытым исходным кодом, такие как Formik
или `React- Final Form.
Все упомянутые библиотеки просты в использовании и обладают (почти) всеми функциональными возможностями, которые могут понадобиться нам в наших проектах.
Все, что нам нужно сделать, это установить и выполнить быструю настройку предпочитаемой библиотеки. После этого мы сможем гораздо быстрее написать все формы, необходимые в проекте, и потратить больше времени на разработку бизнес-логики приложения.
✨ Что такое React
React — это библиотека пользовательского интерфейса с открытым исходным кодом, созданная и поддерживаемая Facebook. React разбивает большое приложение на более мелкие части, называемые компонентами. Такой компонентный подход React делает его более удобным в использовании и обслуживании.
Как вы увидите, React — это не фреймворк, а библиотека. Это означает, что он не является законченным решением.
Новичок в React?
Ознакомьтесь с этим полным руководством по началу работы с React.
Когда вы создаете приложение на React, вам придется использовать другие внешние библиотеки для завершения работы приложения. Такой подход React делает его более мощным, потому что у вас есть свобода выбора любой библиотеки для вашего приложения.
Примеры библиотек, которые вам могут понадобиться: Axios
для HTTP-запросов, Redux
для управления состояниями, React-router-dom
для маршрутизации, React-hook-form
для построения форм.
✨ Почему стоит выбрать правильную библиотеку форм?
Может быть важно, какую библиотеку форм вы выберете для своего приложения, потому что некоторые библиотеки большие и медленные, в них много шаблонных кодов или отсутствует поддержка. Эти проблемы затрудняют использование библиотеки.
По этим причинам вы должны быть разборчивы в выборе библиотеки для вашего приложения. Итак, без промедления давайте погрузимся в работу и рассмотрим плюсы и минусы трех лучших библиотек форм React.
Мы начнем с Formik
.
✨ Formik
Formik
— это библиотека форм React с открытым исходным кодом, автором которой является Джаред Палмар
. Джаред создал Formik
из разочарования, когда ему пришлось создать более 30 форм для своего приложения. Он хотел иметь стандартный способ создания и управления всеми формами в своем приложении. Для этого он создал Formik
.
Эта библиотека поможет вам справиться с тремя самыми неприятными, но важными частями создания форм:
- ? Получение значений в состояние формы и из него
- ? Валидация и сообщения об ошибках
- ? Обработка отправки формы
Вы можете легко построить форму с помощью компонентов Formik <Formik />
, <Form />
, <Field />
и <ErrorMessage />
. Создать форму с помощью Formik очень просто. Позже в этом разделе я покажу вам, как построить форму и проверить ее с помощью Formik.
Перед этим давайте рассмотрим несколько плюсов и минусов Formik.
Плюсы Formik
- Декларативные компоненты (, , )
- 29k+ звезд на Github
- Интеграция с популярной библиотекой валидации: Yup
- Поддержка внешних библиотек пользовательского интерфейса.
Formik Cons
- 7 зависимостей и
12.7
кБ в размере - Нет встроенной валидации
- Много шаблонного кода (по сравнению с React-hook-form)
Теперь, когда мы рассмотрели плюсы и минусы Formik, давайте построим простую форму с помощью `Formik, чтобы все стало ясно.
Установите Formik
Чтобы создать форму с помощью Formik, сначала нам нужно установить его. Мы можем сделать это с помощью следующих команд:
$ npm install formik
// OR
$ yarn add formik
Исходный код формы
import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';
const Basic = () => (
<div>
<h1>Sign Up</h1>
<Formik
initialValues={{
firstName: '',
lastName: '',
email: '',
}}
onSubmit={async (values) => {
await new Promise((r) => setTimeout(r, 500));
alert(JSON.stringify(values, null, 2));
}}
>
<Form>
<label htmlFor="firstName">First Name</label>
<Field id="firstName" name="firstName" placeholder="Jane" />
<label htmlFor="lastName">Last Name</label>
<Field id="lastName" name="lastName" placeholder="Doe" />
<label htmlFor="email">Email</label>
<Field
id="email"
name="email"
placeholder="jane@acme.com"
type="email"
/>
<button type="submit">Submit</button>
</Form>
</Formik>
</div>
);
ReactDOM.render(<Basic />, document.getElementById('root'));
Как вы можете видеть, это простая форма. Мы еще не добавили валидацию. Я сделаю это в следующем разделе.
Для создания формы мы вызвали компонент <Formik>
. Он принимает два реквизита: initialValues
объект, который определяет начальные значения полей ввода и onSubmit
метод, который обрабатывает отправку формы.
Как вы заметили, эта форма является самодекларативной. Это означает, что код описывает происходящее. Вам не потребуется много усилий, чтобы понять его.
После того, как мы закончили базовую форму, следующим шагом будет добавление валидации и ограничение пользователя на ввод соответствующей информации.
? Валидация формы в
Formik
Одна из причин создания Formik — сделать валидацию формы необременительной. Formik поддерживает синхронную и асинхронную Form-level
и Field-level validation
. Он также обеспечивает проверку на уровне формы на основе схемы через Yup
. Yup — очень популярная библиотека валидации форм.
- ? Валидация на уровне формы
- ? Валидация на уровне поля
Вот оно. Полная форма, построенная с помощью Formik
. Для получения дополнительных ресурсов, не стесняйтесь обращаться к ним:
- ? https://formik.org/docs/tutorial
- ? https://blog.logrocket.com/building-forms-formik-react/
✨ React Hook Form
React-Hook-Form
— это библиотека форм, построенная на основе крючков React. Эта библиотека использует другой подход к построению формы. Она изолирует повторные рендеринги компонентов, используя неконтролируемые компоненты.
В отличие от Formik
, React-Hook-Form
имеет нулевые зависимости. А размер в два раза меньше Formik
~= 8.6KB
(minified + gzipped).
React Hook Form уменьшает количество кода, который вам нужно написать, убирая ненужные повторные рендеры. Для валидации форм React-hook-form использует стандартный подход, основанный на Html. Вы можете легко создать форму с помощью React-hook-form с помощью хука useForm
. Я покажу вам, как это сделать позже в этом посте.
Но сейчас давайте рассмотрим несколько плюсов и минусов React Hook Form
.
Плюсы React-Hook-Form
- Меньше шаблонного кода, нулевая зависимость
- Нет проблем на Github (что?)
- Размер 8,6 кб (минифицированный и gzipped)
- Использует встроенную HTML валидацию формы
- Поддерживает
Yup
валидацию формы.
Минусы React-Hook-Form
- Вам необходимо использовать Yup или встроенную валидацию формы
Установите React-Hook-Form
$ npm install react-hook-form
// OR
$ npm install react-hook-form
React-Hook-Form — образец
import { useForm } from "react-hook-form";
const HookForm = () => {
const { register, handleSubmit } = useForm();
const handleRegistration = (data) => console.log(data);
return (
<div>
Hook Form
<form onSubmit={handleSubmit(handleRegistration)}>
<div>
<label>Email</label>
<input type="email" name="email" {..register('email')} />
</div>
<div>
<label>Password</label>
<input type="password" name="pass" {..register('pass')} />
</div>
<button>Submit</button>
</form>
</div>
);
};
Метод handleSubmit обрабатывает отправку формы, а метод register помогает зарегистрировать поле ввода в React Hook Form, чтобы оно было доступно для валидации, а его значение можно было отслеживать на предмет изменений.
Это базовая форма. Теперь давайте рассмотрим, как можно валидировать формы с помощью react-hook-form:
Валидация формы в
React-Hook-Form
React Hook Form использует для валидации форм встроенную HTML-валидацию. Для валидации формы вы передаете правила валидации в метод register.
Правилами валидации являются:
Вот пример валидации форм в React-hook-form
:
export default function App() {
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {..register("firstName", { required: true, maxLength: 20 })} />
<input {..register("lastName" , { pattern: /^[A-Za-z]+$/i })} />
<input type="number" {..register("age", { min: 18, max: 99 })} />
<input type="submit" />
</form>
);
}
Как вы заметили, это только инициализация валидации. Нам понадобится способ показать пользователю сообщение об ошибке.
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("firstName", { required: true })} />
{errors.firstName?.type === 'required' && "First name is required"}
<input {...register("lastName", { required: true })} />
{errors.lastName && "Last name is required"}
<input type="submit" />
</form>
);
}
Для получения дополнительных ресурсов, связанных с React-hook-form
, не стесняйтесь обращаться к ним:
- ? https://react-hook-form.com/get-started#Quickstart
- ? https://blog.logrocket.com/react-hook-form-complete-guide/
✨ React Final Form
React-Final-Form
— это тонкая обертка вокруг библиотеки Final-Form
. Она не имеет никаких других зависимостей, кроме Final Form, и ее размер очень мал ~= 3.3kb (минифицировано и gzipped).
Вы можете легко создавать формы с React-Final-Form
, используя компонент Form and Field из React Final Form. Я покажу вам, как это сделать, через несколько мгновений.
Плюсы React-Final-Form
- Рендеринг только измененных вводимых данных
- Всего 3,2 кб (минимизированный и gzipped)
Минусы React-Final-Form
- Имеет зависимость от сверстников:
Final Form
. - Много кода
boilerplate
.
Установите React-Final-Form
$ npm install final-form react-final-form
// OR
$ yarn final-form react-final-form
Чтобы создать форму, вам нужно импортировать компонент Form и Field из react-final-form
.
Исходный код примера формы
import { Form, Field } from 'react-final-form'
import React from 'react'
import { render } from 'react-dom'
import Styles from './Styles'
import { Form, Field } from 'react-final-form'
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const onSubmit = async values => {
await sleep(300)
window.alert(JSON.stringify(values, 0, 2))
}
const App = () => (
<Styles>
<h1>React Final Form - Simple Example</h1>
<Form
onSubmit={onSubmit}
initialValues={{ firstname: '', lastname :''}}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
</div>
<div>
<label>Last Name</label>
<Field
name="lastName"
component="input"
type="text"
placeholder="Last Name"
/>
</div>
<div className="buttons">
<button type="submit" disabled={submitting || pristine}>
Submit
</button>
<button
type="button"
onClick={form.reset}
disabled={submitting || pristine}
>
Reset
</button>
</div>
</form>
)}
/>
</Styles>
)
render(<App />, document.getElementById('root'))
Как вы можете видеть, эта форма практически аналогична форме Formik
. Для создания формы
компонент принимает 3 реквизита: initialValues
, handleSubmit
и render
.
Это базовая форма с React Final Form без валидации. Валидация в React Final Form представлена в двух вариантах, как и в Formik
- ? Валидация на уровне формы
- ? Валидация на уровне поля
Поскольку схема кода валидации очень похожа на Formik, мы пока пропустим примеры. Для получения дополнительной информации, связанной с React Final Form, пожалуйста, зайдите на сайт:
- ? https://final-form.org/docs/react-final-form/api
- ? https://blog.logrocket.com/build-high-performance-forms-using-react-final-form/
✨ Итак, какую из них выбрать?
Выбор библиотеки форм должен зависеть от того, какой тип проекта вы создаете. Тем не менее, есть несколько глобальных моментов, позволяющих предпочесть одну библиотеку другой.
После всех этих сравнений, если я начну любой проект прямо сейчас, я выберу React-Hook-Form
, потому что у нее нет зависимостей и меньше шаблонного кода по сравнению с React-Final-Form
и Formik
.
Formik
и React-Final-Form
делают формы сложными, в то время как React-Hook-Form выглядит чище и интуитивно понятнее на первый взгляд. Кроме того, валидация, обеспечиваемая React-Hook-Form
, использует меньше кода для завершения работы.
В конце концов, не стесняйтесь выбирать Formik
или React-Final-Form
для своего проекта. Это полностью зависит от ваших личных предпочтений.
Извините за эту очень длинную статью. Для тех, кто все еще здесь, в следующем разделе представлены несколько продуктов React, которые используют готовые к производству React Forms
.
✨ React Berry (использует Formik
)
Berry — это креативная React Dashboard, построенная с использованием Material-UI. Она призвана стать лучшим пользовательским интерфейсом с высоко настраиваемыми страницами, обогащенными функциями. Это полный геймчейнджер React Dashboard с простым и интуитивно понятным отзывчивым дизайном на экранах retina или ноутбуках.
- ? React Node JS Berry — страница продукта
- ? React Node JS Berry — LIVE Demo
Продукт поставляется с простым потоком аутентификации JWT: login
/ register
/ logout
с открытым исходным кодом Node JS API Backend через библиотеку Passport
.
✨ React Datta Able — (использует Formik
)
Datta Able — это React Dashboard с открытым исходным кодом, который обеспечивает красочный и современный дизайн. Datta Able React Free — самый стилизованный React Free шаблон админки, обойдя все остальные шаблоны админки на рынке.
- ? React Node Datta Able — страница продукта
- ? React Node Datta Able — LIVE Demo