145 читали · 2 года назад
Refs в React: от доступа к DOM до императивного API
Источник: Nuances of Programming Одна из полезных особенностей React  —  абстрагирование от сложного взаимодействия с объектной моделью документа (DOM, Document Object Model). Вместо того чтобы запрашивать элементы, пытаться добавить к ним классы и устранять несоответствия браузера, можно просто писать компоненты, сосредоточившись на взаимодействии с пользователем. Однако иногда все же появляется необходимость в доступе к реальному DOM. И здесь самое важное  —  разобраться в особенностях Ref и его окружения, научиться их правильно использовать...
React Testing Library: как протестировать компонент react-quill
Компонент Итак, у меня есть компонент вызова ReactQuill, приведу краткий пример кода (прим. Editor/index.js) ... import ReactQuill from 'react-quill' const Editor=({value, onChange, ...other})=>{ const handleOnChange=(val)=>{ onChange(val) } const modules={...} return ( <ReactQuill value={value} onChange={handleOnChange} modules={modules} {...other} /> ) }) Здесь всё просто, на изменение поля я вызываю кастомный обработчик (onChange), в который передается текущее значение...
425 читали · 3 года назад
Как создать приложение Todo на React
Источник: Nuances of Programming Рассмотрим, как с нуля создать приложение Todo (список дел) с помощью React, библиотеки JavaScript для разработки пользовательских интерфейсов, используя синтаксис ES6 и хуки React. Это будет базовое приложение с полем для ввода элемента Todo и кнопкой рядом с каждым элементом, предназначенной для его удаления. Кроме того, мы будем использовать хук useState из React для сохранения состояния приложения и некоторые продвинутые функции JavaScript, такие как map(), массив spread, ternary operator и метод filter()...
262 читали · 4 года назад
Как с легкостью создавать формы на React с помощью react-hook-form
Источник: Nuances of Programming Никто не любит раз за разом создавать сложные формы с валидацией, и React-разработчики  —  не исключение. Когда дело доходит до создания форм в React, важно выбрать такую библиотеку, которая предоставляет максимум удобных инструментов и требует минимум кода. Исходя из этих двух критериев  —  полезности и простоты  —  идеальным вариантом будет react-hook-form. Посмотрим, как применить react-hook-form в проектах для создания насыщенных, функциональных форм. Установка...