Главная » Архив меток: React

Архив меток: React

Использование перетаскивания в React

От автора: в этом посте я объясню основы использования библиотеки с открытым исходным кодом react-dnd (версия 14.0.2 на данный момент) и покажу несколько актуальных примеров кода.. Подготовка Установите библиотеки react-dnd и react-dnd-html5-backend с помощью npm/yarn. Оберните компонент-контейнер (тот, который отображает компоненты с помощью перетаскивания) DndProvider следующим образом: import { DndProvider } from 'react-dnd' import { HTML5Backend } from 'react-dnd-html5-backend' export ...

Читать далее »

Использование localStorage с React Hooks

От автора: localStorage — это один из двух механизмов веб-хранилища браузера. Он позволяет пользователям сохранять данные в виде пар ключ / значение в браузере для последующего использования. В отличие от механизма sessionStorage, который сохраняет данные в хранилище браузера, пока открыта текущая вкладка браузера, localStorage не очищает данные при закрытии браузера. Это делает его идеальным для хранения данных, не привязанных к ...

Читать далее »

Три примера багов кода React и способы их устранения

От автора: обычно в React есть несколько способов написать код. И хотя можно создать одно и то же по-разному, могут быть один или два подхода, которые технически работают «лучше», чем другие. Я на самом деле сталкиваюсь со множеством примеров, когда код, используемый для создания компонента React, технически «правильный», но вызывает проблемы, которых можно было бы избежать Итак, давайте рассмотрим некоторые ...

Читать далее »

Выявление ошибок в React с помощью Error Boundaries

От автора: эта статья познакомит вас с концепцией error boundaries в React. Мы рассмотрим, какие задачи они пытаются решить, как их реализовать и какие у них есть недостатки. Наконец, мы рассмотрим небольшой слой абстракции, который делает error boundaries еще лучше! Даже в самых безупречных приложениях время от времени возникают ошибки выполнения. Сеть может выйти из строя, какая-то внутренняя служба может ...

Читать далее »

10 способов стилизовать приложение на React

От автора: React — это библиотека для рендеринга пользовательского интерфейса, она не заботится о стилях. React – это хорошая вещь, но она также оставляет нас одних в большом океане с множеством возможностей. Обычно выбрать систему стилей для приложения React не так сложно, как кажется. Также необязательно использовать все 10 способов, перечисленных в статье. Хорошо знать все доступные варианты, чтобы вы ...

Читать далее »

Архитектура React: как структурировать и настроить приложение

От автора: нет единого мнения о том, как правильно организовать приложение React. React дает вам большую свободу, но с этой свободой приходит ответственность принять решение о вашей собственной архитектуре. Часто бывает так, что тот, кто настраивает приложение, сваливает почти все в папку components, или, может быть, и в components и в containers если он использовал Redux, но я предлагаю лучший ...

Читать далее »

Руководство по пользовательским хукам React с MutationObserver

От автора: с появлением React Hooks количество совместно используемого кода в кодовых базах React резко возросло. Поскольку хуки — это тонкие API-интерфейсы поверх React, разработчики могут сотрудничать, прикрепляя повторно используемое поведение к компонентам и разделяя это поведение на более мелкие модули. Хотя это похоже на то, как разработчики JavaScript абстрагируют бизнес-логику в модулях ванилла JavaScript, хуки предоставляют больше, чем просто ...

Читать далее »

Путь к увеличению производительности приложения на React в 10 раз

От автора: когда-либо получали ошибку «Aw! Snap» в вашем приложении? Пытались это решить? Вы просто погуглили и не нашли ничего, кроме статьи о ошибках chrome? Как правило, простое обновление страницы поможет вашему приложению снова запускаться. Год назад в Technogise у меня появилась возможность поработать над тяжелым фронт-энд приложением ReactJS с множеством функций. Мы унаследовали эту кодовую базу, внесли в нее ...

Читать далее »

Динамическая и статическая маршрутизация в React

От автора: маршрутизация — это тема, с которой большинство из нас знакомо. Однако фреймворки SPA и библиотеки маршрутизации используют различные методы. Два таких подхода — статическая и динамическая маршрутизация. Такие фреймворки, как Angular, Ember и библиотека React Router (в прошлом) поддерживали статическую маршрутизацию. Но недавно React Router представил динамическую маршрутизацию для устранения некоторых основных ограничений статической маршрутизации. Как разработчики, мы ...

Читать далее »

Использование форм в React

От автора: независимо от того, какое приложение вы пишете, велика вероятность, что вам понадобится хотя бы одна форма. Формы в React часто вызывают затруднения, поскольку содержат детальный и шаблонный код. Давайте посмотрим, как создавать формы в React с меньшими усилиями. В этой статье мы сосредоточимся на использовании простого React без библиотек. Вы узнаете, как на самом деле работают формы, и ...

Читать далее »