От автора: в данном уроке мы разберем, как сделать калькулятор расчета стоимости проекта на React JS. Рассмотрим, как сохранять выбранные элементы калькулятора, как суммировать их и динамически присваивать CSS-классы элементам DOM дерева. Читайте нас в Telegram, VK, Яндекс.Дзен
Читать далее »Архив меток: React
Изучение трех новых API в React 18
От автора: самая большая тема в экосистеме React сейчас — React 18 и выпуск его долгожданных функций параллельного рендеринга. В июне 2021 года команда React объявила о планах React 18 и о том, что должно произойти. Несколько месяцев спустя, в декабре, главной темой React Conf 2021 стали все недавно анонсированные функции параллельного рендеринга. Вместе с React 18 было представлено несколько ...
Читать далее »Все о миграции с ReactJS на NextJS
От автора: общие мысли, проблемы и результаты: миграция технического стека Peerlist с ReactJS на NextJS. Эта статья охватывает большую часть наших мыслей, связанных с решением и процессом миграции, и, возможно, не будет углубляться в технологии, но, в конце концов, ее стоит прочитать! React — одна из самых популярных библиотек JavaScript, которая в наши дни широко используется во многих приложениях, а ...
Читать далее »Три шаблона проектирования компонентов React
От автора: React, возможно, является самой популярной библиотекой JavaScript для создания пользовательских интерфейсов, и одной из причин этого является его непредвзятый характер. Независимо от того, решите ли вы рассматривать React как фреймворк или библиотеку, можно выделить одну особенность — это его невмешательство в то, как разработчики должны создавать приложения React, что дает им, разработчикам, и командам разработчиков свободу решать, какими ...
Читать далее »Лучший способ решить задачу сквозной передачи данных в React
От автора: работа с управлением состоянием в приложениях React может быть непростой задачей, особенно когда данные необходимо передать от корневого компонента к глубоко вложенным компонентам. Мы, как разработчики React, часто склонны перепроектировать свои приложения, слишком сильно полагаясь на Context API и Redux в ситуациях, когда они на самом деле не нужны. Мы неоправданно часто обращаемся к этим инструментам — даже ...
Читать далее »5 способов избежать повторного рендеринга компонентов React
От автора: компоненты React прошли долгий путь развития с момента их создания. Тем не менее, многим разработчикам трудно исправить ненужные повторные рендеринги. Однако существует множество способов избежать этой проблемы. В данной статье я расскажу о 5 методах, позволяющих избежать ненужных повторных рендерингов в компонентах React. 1. Мемоизация с использованием хуков useMemo() и UseCallback() Мемоизация позволяет вашему коду перерисовывать компоненты только ...
Читать далее »PurgeCSS: удаление неиспользуемого кода CSS
От автора: фреймворки CSS — это наборы таблиц стилей, которые заранее подготовлены и готовы к использованию. Разработчики выбирают CSS-фреймворки, чтобы предоставлять цифровые возможности более интуитивно понятным, эффективным и соответствующим стандартам образом. Однако CSS-фреймворки также могут создавать проблемы. Маловероятно, что вы будете использовать все функции, предлагаемые в рамках CSS, а это означает, что неиспользуемый код останется в вашем конечном приложении. Неиспользуемый ...
Читать далее »Переход на React Router v6: полное руководство
От автора: переход с React Router v5 на v6 может быть сложным, потому что в React Router v6 есть несколько существенных изменений, в сравнении с React Router v5. Кроме того, был введен ряд новых функций, поэтому рекомендуется обновиться до v6, даже если переход будет немного раздражать. Чтобы перейти с React Router v5 на v6, вам нужно либо создать новый проект, ...
Читать далее »Создание доступной якорной ссылки с помощью React
От автора: ссылки необходимы для навигации по любому веб-сайту с момента появления современной сети в 2000-х годах. Не существует определенного числа, выражающего максимальное количество ссылок на любой веб-странице. Однако можно с уверенностью предположить, что семантический HTML header будет иметь несколько ссылок анкоров. В конце концов, header — это точка входа во вложенную структуру вашего сайта. Хотя переполненная навигация может быть ...
Читать далее »Недооцененные хуки React
От автора: React Hooks предоставляют нам доступ к основным функциям React в контексте функциональных компонентов. Традиционно для оптимизации React разработчикам приходилось переключаться между функциональными и классовыми компонентами, однако React Hooks позволяет нам использовать функциональные компоненты во всех проектах для создания как небольших, так и крупных приложений. Если вы разработчик React и предпочитаете писать функциональные компоненты вместо классовых, то эта статья ...
Читать далее »