От автора: рендеринг большого набора данных в DOM без правильных инструментов может быть довольно затратным, так как это отрицательно сказывается на производительности веб-страницы; замедляет время выполнения, сетевые запросы и производительность памяти. В этом руководстве мы рассмотрим, как визуализировать большой объем данных из внешнего API или фиктивного файла данных в нашем приложении. Мы будем использовать библиотеку React под названием response-window, для ...

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

От автора: Atomic Layout — это легкая библиотека React, которая позволяет создавать адаптивный макет сетки для ваших компонентов. Современные библиотеки CSS, такие как styled-components и emotion невероятно полезны, потому что они позволяют создавать изолированные локальные CSS, которые применяются только к намеченным конкретным компонентам. Но поскольку обе библиотеки ориентированы на написание CSS только внутри JavaScript, это означает, что вам придется самостоятельно ...

От автора: недавно я перевел значительную кодовою базу с Create-React-App (сокращенно CRA) на Next и подумал, что хорошо бы было поделится своим опытом, потому что, поверьте мне, это было довольно долгое путешествие (и не всегда приятное). Есть много причин, по которым вы можете захотеть перейти на Next с приложения CRA. Next обеспечивает рендеринг на стороне сервера (SSR) и даже инкрементную ...

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

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

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

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

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