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

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

«Запашки» кода React-компонентов

Перевод статьи React component code smells с сайта antongunnarsson.com, опубликован на CSS-live.ru с разрешения автора — Антона Гуннарсона Это не окончательный вариант статьи, могут быть новые дополнения. Растущая коллекция того, что я считаю «запашками» кода React-компонентов. Что такое «запашок» кода? «Запашок» кода — что-то такое, что вроде бы и не ошибка, но может быть признаком более серьезной проблемы в коде. Больше информации в Википедии. ...

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

Калькулятор расчета стоимости проекта на ReactJS

От автора: в данном уроке мы разберем, как сделать калькулятор расчета стоимости проекта на React JS. Рассмотрим, как сохранять выбранные элементы калькулятора, как суммировать их и динамически присваивать CSS-классы элементам DOM дерева. Читайте нас в Telegram, VK, Яндекс.Дзен

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

Изучение трех новых 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 — это точка входа во вложенную структуру вашего сайта. Хотя переполненная навигация может быть ...

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