Zod: строгая валидация и удобная типизация. Опыт перехода

Привет, Хабр! Меня зовут Сергей, я фронтенд-инженер в Банки.ру. В этой статье расскажу, как Zod помог нам перестать писать валидацию на уровне полей, подружился с React Hook Form и стал единым источником правды о структуре данных. К Zod мы пришли не сразу. Долгое время типы и валидация у нас жили в разных слоях приложения: TypeScript определял структуру данных во время разработки, а отдельные функции или библиотеки (вроде Yup) проверяли входящие значения в рантайме. Это классическая проблема: дублирование логики и рассинхрон. Типы в interface поменялись, а валидация осталась прежней (или наоборот). Мы пробовали Yup, но он казался громоздким в связке с TS: типы приходилось выводить вручную или мириться с тем, что схемы выглядят непрозрачно. В какой-то момент стало непонятно: зачем тащить отдельную библиотеку, если проще написать if (typeof x === 'string') ? С переходом на Zod всё стало значительно проще: одна схема одновременно является и валидатором, и источником типа данных.

https://habr.com/ru/companies/banki/articles/994886/

#zod #typescript #валидация_данных #runtime_валидация #react_hook_form #типизация_данных #frontend_разработка #валидация_форм #developer_experience #валидация

Steroids Form — как создать собственный движок форм для React

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

https://habr.com/ru/companies/kozhindev/articles/948468/

#фронтенд #фронтендфреймворки #фронтендразработка #react #reactjs #вебразработка #opensource #react_hook_form #formik

ゼロから始める React Hook Form
https://qiita.com/kikotkk/items/e5995e5764914a09a791?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #React #react_hooks #react_hook_form

useActionState: новый герой в мире React

Привет, React-энтузиаст! Случалось ли тебе писать логику для форм, где нужно не только обработать кучу полей, но и синхронизировать их с асинхронными действиями (запросы, загрузка данных, показ успеха или ошибок)? Если да, то, возможно, ты уже слышал об экспериментальном хуке useFormState в React. Однако на смену ему пришёл более мощный инструмент - useActionState . В статье обсуждается, почему прежний подход ушёл на пенсию, чем хорош новый, и как он может упростить жизнь каждому фронтенд-разработчику.

https://habr.com/ru/articles/870216/

#react #useActionState #JavaScript #Frontend #react_hooks #react_hook_form #вебразработка #асинхронные_операции

【React×TypeScript 】学習記録アプリの完成
https://qiita.com/masafumi1073/items/fb9fd3a5de75cc8cdd8d?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #初心者 #TypeScript #React #react_hook_form

40代非エンジニア、TypeScript はじめの一歩
https://qiita.com/nyakako13/items/6251e58a129f6d455dfb?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #TypeScript #React #react_hook_form #chakra_ui

【React】ライブラリの《ステート系機能》と《手続き的取得機能》を区別しよう
https://qiita.com/honey32/items/1241af82da9f7adcb088?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #React #react_hook_form #SWR #TanStackQuery

[Перевод] Анатомия shadcn/ui

Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui . Вместо того, чтобы распространяться в виде пакета npm , компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui . "Почему код для копирования/вставки, а не библиотека? Идея заключается в том, что вы полностью владеете и контролируете код. Это позволяет вам решать, как именно будут построены и оформлены ваши компоненты. Начните с настроек по умолчанию, а затем кастомизируйте компоненты под свои нужды. Используя пакет npm, можно наткнуться на один недостаток — стиль всегда связан с реализацией. Дизайн компонентов должен быть отделен от их реализации". На самом деле, shadcn/ui — это не просто очередная библиотека компонентов, а технология, позволяющая представить дизайн-систему в виде кода. Цель этой статьи — немного изучить архитектуру и реализацию shadcn/ui . Если вы еще не использовали shadcn/ui , я советую просмотреть ее документацию и немного поэкспериментировать с ней, чтобы извлечь из статьи максимальную пользу.

https://habr.com/ru/companies/timeweb/articles/781346/

#timeweb_статьи_перевод #shadcn/ui #tailwindcss #react_table #react_hook_form #radix_ui #reactjs #reactjs #react #js #css #design_system #дизайнсистема