Откройте для себя Zod: библиотеку проверки схемы для ваших проектов React.js!

Если вы давно мечтали о простой, но мощной библиотеке проверки схемы для своего проекта React.js, то вас ждет угощение! В этом руководстве мы углубимся в мир Zod и узнаем, как настроить и использовать Zod.dev в ваших проектах React.js. К концу этого руководства вы сможете легко интегрировать Zod в свои проекты и сделать свою жизнь разработчика намного проще.

Предпосылки

Прежде чем мы начнем, убедитесь, что у вас есть следующее:

Базовые знания React.js и TypeScript
Node.js и npm установлены в вашей системе
Новый или существующий проект React.js с включенным TypeScript (create-react-app)

Готовый? Давайте начнем!

Шаг 1: Установите Zod и его зависимости

Сначала перейдите в каталог вашего проекта и установите Zod вместе с его зависимостями:

npm install zod tslib

Шаг 2: Создайте новую схему Zod

В вашем проекте создайте новый каталог с именем schemas и внутри него создайте новый файл с именем userSchema.ts. Здесь мы определим нашу схему Zod для пользовательских данных.

Откройте userSchema.ts и добавьте следующий код:

import { z } from 'zod';

export const userSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email address'),
  age: z.number().min(18, 'Age must be at least 18'),
});

Здесь мы импортируем объект z из библиотеки Zod и создаем схему пользователя с тремя полями: name, email и age. Мы также применяем некоторые основные правила проверки к каждому полю.

Шаг 3: Создайте новый компонент React

Теперь давайте создадим новый компонент React, чтобы продемонстрировать, как использовать схему Zod в форме. В вашем каталоге src создайте новый файл с именем UserForm.tsx и добавьте следующий код:

import React, { useState } from 'react';
import { userSchema } from './schemas/userSchema';
import { z } from 'zod';

interface UserFormProps {}

interface FormErrors {
  name?: string;
  email?: string;
  age?: number;
}

const UserForm: React.FC<UserFormProps> = () => {
  const [formValues, setFormValues] = useState({
    name: '',
    email: '',
    age: '',
  });

  const [errors, setErrors] = useState<FormErrors>({});

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setFormValues({ ...formValues, [name]: name === 'age' ? parseInt(value) : value });
  };

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    try {
      const validValues = userSchema.parse(formValues);
      setErrors({});
      // Do something with the valid values, like sending them to an API
    } catch (error) {
      if (error instanceof z.ZodError) {
        setErrors(error.flatten().fieldErrors);
      }
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Render form fields and error messages */}
    </form>
  );
};

export default UserForm;

В этом компоненте мы импортируем userSchema и создаем форму с контролируемым состоянием для значений формы. У нас также есть состояние errors для хранения сообщений об ошибках от Zod.

При отправке формы мы пытаемся проанализировать значения формы, используя userSchema.parse(). Если значения допустимы, мы очищаем ошибки и продолжаем обработку допустимых значений. Однако, если есть ошибка проверки, мы перехватываем ее и обновляем состояние errors соответствующими сообщениями об ошибках.

Шаг 4. Визуализация полей формы и сообщений об ошибках

Теперь давайте отобразим поля формы и отобразим сообщения об ошибках, если есть какие-либо ошибки проверки. Обновите оператор return компонента UserForm.tsx следующим кодом:

return (
  <form onSubmit={handleSubmit}>
    <div>
      <label htmlFor="name">Name:</label>
      <input
        type="text"
        name="name"
        id="name"
        value={formValues.name}
        onChange={handleChange}
      />
      {errors.name && <span className="error">{errors.name}</span>}
    </div>
    <div>
      <label htmlFor="email">Email:</label>
      <input
        type="email"
        name="email"
        id="email"
        value={formValues.email}
        onChange={handleChange}
      />
      {errors.email && <span className="error">{errors.email}</span>}
    </div>
    <div>
      <label htmlFor="age">Age:</label>
      <input
        type="number"
        name="age"
        id="age"
        value={formValues.age}
        onChange={handleChange}
      />
      {errors.age && <span className="error">{errors.age}</span>}
    </div>
    <button type="submit">Submit</button>
  </form>
);

Здесь мы отображаем поля формы с соответствующими сообщениями об ошибках. Если есть ошибка для определенного поля, мы отображаем ее с помощью элемента span с className из error.

Шаг 5: Добавьте стили для сообщений об ошибках

Чтобы сообщения об ошибках выделялись, добавьте следующие правила CSS в основную таблицу стилей вашего проекта или создайте новый файл CSS и импортируйте его в UserForm.tsx:

.error {
  color: red;
  font-size: 12px;
  margin-left: 8px;
}

Теперь ваша форма должна отображать сообщения об ошибках красным цветом рядом с недопустимыми полями.

Шаг 6: вызовите новый компонент

Замените App.tsx на:

import './App.css';
import UserForm from './UserForm';

function App() {
  return (
    <div className="App">
      <UserForm />
    </div>
  );
}

export default App;

Шаг 7: Давайте проверим!

Теперь, когда вы реализовали проверку Zod в своем проекте React.js, пришло время протестировать функциональность и убедиться, что все работает должным образом.

Запустите сервер разработки

В терминале перейдите в каталог проекта и выполните следующую команду:

npm start

Это запустит ваш сервер разработки, и теперь ваш проект должен быть доступен по адресу http://localhost:3000.

Тест формы

Откройте браузер и перейдите к http://localhost:3000. Вы должны увидеть форму с полями для имени, электронной почты и возраста.

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

Если все вышеперечисленные тесты дали ожидаемые результаты, поздравляем! Вы успешно интегрировали Zod.dev в свой проект React.js и реализовали форму с проверкой схемы.

Поздравляем!

Вы успешно настроили и использовали Zod в своем проекте React.js. Теперь вы знаете, как создавать схемы Zod, интегрировать их в свои компоненты и отображать сообщения об ошибках для недопустимых полей формы.

Zod предлагает простой, но мощный способ проверки схемы в ваших проектах React.js. Включив его в свой рабочий процесс, вы можете гарантировать, что ваши данные всегда действительны и соответствуют ожидаемой структуре.

Присоединяйтесь к Medium по моей реферальной ссылке — Leo G.
Прочитайте все истории от Leo G. (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Leo G…medium.com

Вот несколько полезных ресурсов, которые помогут вам глубже погрузиться в темы, затронутые в этом руководстве, а также связанные с ними темы, которые помогут расширить ваши знания и навыки в области веб-разработки:

Документация по Zod: https://zod.dev/?id=introduction Узнайте больше о Zod, его функциях и о том, как эффективно использовать его для проверки схемы.
Документация по React.js: https://react.dev/reference/react Расширьте свои знания о React.js и изучите более сложные концепции, шаблоны и лучшие практики.
Документация по TypeScript: https://www.typescriptlang.org/docs/ Узнайте больше о TypeScript, его возможностях и о том, как он может улучшить рабочий процесс разработки.
Formik: https://formik.org/ — популярная библиотека для управления состоянием формы и проверки в приложениях React.js. Сравните его с Zod, чтобы понять их различия и выбрать лучший инструмент для ваших нужд.
Форма React Hook: https://react-hook-form.com/ — еще одна популярная библиотека форм, которая работает с React.js. Основное внимание уделяется предоставлению простого и эффективного способа управления состоянием и проверкой формы.
Библиотека тестирования React: https://testing-library.com/docs/react-testing-library/intro/ Узнайте, как эффективно тестировать компоненты React.js, включая проверку форм. и обработка ошибок, чтобы ваше приложение работало должным образом.

Эти ресурсы должны предоставить вам прочную основу, на которую можно опираться, и помочь вам продолжать совершенствовать свои навыки в веб-разработке, React.js и обработке форм. Приятного обучения!

✌️Если вы планируете подписаться на Medium, пожалуйста, не стесняйтесь использовать эту ссылку. Вам ничего не будет стоить, а мне очень поможет
👏 Хлопайте в ладоши, чтобы эта статья попала в топ
🔔Подпишитесь на меня в Медиуме